[SeSAC] React 시작하기

JS를 사용하며 필요할 때마다 요소(Element)를 생성한 경험이 있을 것이다.

const liTag = document.createElement("li");
const divTag = document.createElement("div");
liTag.append(divTag);

DOM조작을 통해 트리에 정보를 업데이트 시켜 화면에 나타나게 한다.
이러한 작업이 반복되고 더욱 복잡하다면 reflow가 발생해 큰 비용과 성능에 문제가 발생한다.

• reflow: 요소의 너비, 높이, 위치 등이 변경되어 렌더트리 재생성

Virtual DOM

• JS Object로 만들어진 DOM

두개의 가상돔 객체를 가진다.

1. 렌더링 이전 화면 구조
2. 렌더링 이후에 보이게 될 화면 구조

어떤 이벤트로 인해 DOM조작이 필요하여 내용이 변한다면
가상돔에 먼저 적용하여 변화된 부분을 비교(Diffing)해 DOM에 한번에 적용시켜준다.

---

Vite

'비트(veet)'라고 읽으며 프랑스어로 '빠르다'를 의미한다.
프론트엔트 프로젝트 빌드 도구로 사용된다.

1. 프로젝트 생성

• 노드 패키지 매니저를 사용하여 비트 최신 버전의 react 프로젝트를 생성한다.
• npm create vite@latest my-app -- --template react

2. 프로젝트로 이동 cd my-app
3. dependencies npm install
4. 실행 npm run dev