1.Components
1). 특징
(1). Html, css, js 가 합쳐져 UI 한 부분을 규정하고 조정
(2). UI를 관리하기 쉽도록 작게 분해하여 UI의 다른 위치에도 사용할 수 있게 해줌
(3). 비슷한 코드가 한곳에 저장됨 (한 파일에 js, html,css 같이 작성 가능)
(4). 디자인과 개발 원칙을 따름
(5). 커스텀 컴포넌트는 실제로 렌더링 된 DOM에 나타나지 않음 기본 HTML요소만 존재
(6). 컴포넌트 트리는 리액트가 분석하고, 리액트는 모든 컴포넌트에서 나온 모든 JSX코드를 결합하여 전반적인 DOM을 생성(화면에 보이는 요소)
2). 규칙
(1). 함수의 제목이 대문자로 시작해야함
- div, image와 같은 내장요소는 소문자로 시작,
리액트에게 내장된 컴포넌트가 아니라고 알려줘야함
* 내장요소 vs 커스텀 컴포넌트
- 내장요소 : 리액트에서 DOM 노드로서 렌더링
- 커스텀 컴포넌트 : 단순한 함수로 리액트에서 함수로서 실행됨
(1). 렌더링 가능한 값이 반환되어야 함
- 대체로 나중에 렌더 될 HTML 마크업이 반환
2. index.html
1). 특징
(1). rendering은 리액트 담당이기 때문에 index.html에 js 파일을 로딩 할 수 있음
(2). index.jsx를 src 부분에 포함
<body><div id="root"><script type="module" src="/src/index.jsx"></script></div></body>(3). root 디브 내에 전체 리액트 앱이 담겨있음
3. jsx (javascript syntax extension)
1). 특징
(1). js 문법 확장자를 의미
(2). 비표준의 자바스크립트 문법을 사용하기 때문에 .jsx를 사용하는 것
(3). Html 마크업 코드를 작성 하여, HTML 요소를 설명하고 생성할 수 있게 함
(4). 리액트는 UI를 전체와 부분을 설명하고 생성하기 위한 것으로 jsx는 유용한 기능임
(5). 브라우저에서는 사용 불가 -> index.jsx 와 App.jsx 파일에 있는 코드는 브라우저에 사용할 수 없음
(6). 작성된 코드는 브라우저에 도달하기 전에 개발 서버에서 변환됨(브라우저에서 사용가능한 코드로)
3. index.jsx
1). 특징
import App from "./App.jsx"(1). App.jsx로부터 앱컴포넌트를 가져옴
const entryPoint = document.getElementById("root");
ReactDOM.createRoot(entryPoint).render(<App/>);(2).위 코드는 JSX 코드는 함수로 전환되지 않음 -> 대신 값으로 이용되어 호출된 다른 메소드의 인수로 쓰임
(3). Html 파일에 가장 먼저 로딩되는 파일 -> 리액트 앱의 주요 입구로 작용
(4). createRoot -> React에서 생성된 것이 아니고, index.html 파일의 한 부분의 요소를 입력값으로 설정
index.html 에 있는 div (id=root)를 getElementById로 가져온것
(5). render : getElemenentById("root")를 통해 <div id="root"></div>를 가져오고 render를 통해 가져온 div 내에 리액트가 리액트 컴포넌트 삽입 -> App 컴포넌트가 요소에 삽입됨
4. 리액트의 가상 DOM 사용
1). 특징
(1). 리액트는 가상 DOM을 사용하여 실제 DOM의 어떤 부분들이 업데이트 되어야 하는지 찾음
2). 사용이유
(1). 가상 DOM은 메모리 내에 존재하고, 실제 DOM을 사용하는 것보다 빠름
(2). 실제 DOM 동작은 성능적인 무리가 많이 감
3). 동작 방식
(실제DOM이 어떻게 나타나야 하는지 가상으로 나타내는 과정)
(1). 페이지 새로고침 > 전체 리액트 앱 시작 > 첫 렌더링 > 리액트는 컴포넌트 트리를 만듬> 렌더링 되어야 하는 실제 HTML 코드를 컴포넌트 트리로부터 전달 > 가상 DOM 스냅샷 생성
(전체 가상 DOM이 실제DOM에 삽입되는 과정)
(2). 생성됐었던 마지막 가상 DOM 스냅샷과 새로운 스냅샷 비교 (이 전 가상DOM과 새로운 가상DOM의 비교,첫 렌더링일 경우 이전의 스냅샷은 없음) > 리액트는 바뀐것을 확인 >업데이트된 HTML 코드 전달 > 실제 DOM 에게 가서 변동 사항을 적용
'React' 카테고리의 다른 글
| [React] proxy props 사용하기 (0) | 2024.04.02 |
|---|---|
| [React] key prop의 중요성 (1) | 2024.03.29 |
| [React] useState() (1) | 2024.03.29 |
| [React] 동적인 eventHandler 구현 시 주의 (0) | 2024.03.29 |
| [React] React에 대한 짧은 개요 (0) | 2024.03.27 |