React.js 개론 정리

리액트의 기술적인 특징

1. 컴포넌트를 기반으로 UI를 표현한다

웹 페이지에서 구성요소들을 하나의 js파일로 컴포넌트화 한다.
그러면 중복코드가 줄어든다는 장점이 있다.

2. 화면 업데이트 구현이 쉽다.

단순히 State변수만 바꿔주면 해당 변수에 맞는 UI를 렌더링할 수 있다.

3. 화면 업데이트가 빠르게 처리된다.

자바스크립트에서 DOM트리 요소를 변경시킬 때 위 그림과 같이 동작과정이 일어난다.
하지만 Layout, Painting 과정은 시간이 오래걸린다는 단점이 있다.

3000번 렌더링을 업데이트 시킨다면 4,500ms가 걸린다.

반면에 한번만 렌더링을 시키게 된다면 250ms로 22배 개선된다.

그래서 리액트에서는 다양한 업데이트가 발생되었을 때 동시에 발생한 업데이트를 모았다가 한번에 수정한다.

여기서 이러한 것이 가능하게 되는 이유는 Virtual Dom 때문이다.
실제 돔트리를 복제한 트리로 실제돔트리에 반영하는 것이 아니라 업데이트요소를 virtual Dom트리 먼저 반영을 시킨 후 실제 돔트리에 반영시킨다.

즉 Virtual Dom은 버퍼 역할을 하게 된다.

리액트 APP 생성하기

1. npm create vite@latest
2. cd 해당 폴더
3. npm install
4. npm run dev

• public폴더에는 정적파일 (이미지, 동영상, 폰트파일) 저장
• src에는 리액트 코드가 작성되는 파일

리액트 구동원리

0. index.html에서 main.jsx라는 자바스크립트 파일을 실행함
   

1. main.jsx에서 id가 root인 태그를 react Root로 설정함
   

2. 그리고 App이라는 컴포넌트를 랜더링함