리액트 소개

리액트의 특징 (추구하는 것)

• 컴포넌트를 기반으로 UI를 표현한다.
  • 이는 재사용성이 높은 UI의 구현을 위해 적용되었다.
• 화면 업데이트 구현이 쉽다.
  • 선언형 프로그래밍 방식(추상화된 기능) 으로 동작하기 때문에, 구현이 간편하다.

선언형 프로그래밍 ↔ 명령형 프로그래밍
(하나부터 열까지 전부 지시)
으로 이해하면 좋다.

• 화면 업데이트가 빠르게 처리된다. (SPA)
  • 리액트의 SPA는 Virtual DOM(버퍼 객체) 을 구성함으로써, JS로 인한 DOM의 수정 사항을 모아서 객체로 처리하다가, 마지막에 DOM을 한번만 수정하고, 그러므로 수정 시간을 단축시킨다.

브라우저의 렌더링 과정

1. HTML 을 DOM(Document Object Model)으로 변환하고, CSS를 CSSOM(CSS Object Model)로 변환한다.
2. DOM과 CSSOM을 합쳐 Render Tree를 생성한다. (웹페이지의 청사진 느낌)
3. Layout을 구성한다. (요소의 배치 구성)
4. Painting을 수행한다. (실제로 화면에 그려내기)

화면의 업데이트

• 자바스크립트가 DOM을 수정함으로써 업데이트 이벤트가 발생한다.
• 이때, Layout의 수정(Reflow)과 Painting (Repaint)은 꽤나 오래걸리는 과정이다.(최적화 포인트)

vite로 생성한 패키지의 구성

• public
  • 정적인 파일 (동영상, 사진 등) 을 보관하는 폴더.
• src
  • 실제로 우리가 작성하게 될 리액트/자바스크립트 코드 저장소
  • assets
    • public과는 다른 정적인 파일 저장소
  • App.jsx
    • 리액트 소스코드를 작성하는 확장자.
    • 기본 소스코드가 담겨있다.

React App 구동 원리

1. 리액트 앱이 실행되면 리액트 앱이 index.html을 브라우저로 가져온다.
2. 브라우저가 index.html의 script 태그에 있는 /src/main.jsx 파일을 실행한다.
3. main.jsx에는 해당 페이지를 구현하는 리액트 모듈이 존재한다.

아래부터는 "리액트 모듈"이 수행합니다.

4. 인수로 전달받은 html 요소를 React의 root로 만드는 ReactDOM.createRoot(document.getElementById(’root’)) 메소드를 실행시킨다.
5. 해당 메소드의 반환값은 root. root는 react 애플리케이션에서 가장 상위에 있는 컴포넌트이다.
   모든 컴포넌트는 root 컴포넌트의 하위 컴포넌트이며, root 컴포넌트를 렌더링하면 하위 모든 컴포넌트를 렌더링하게 된다.
6. 리액트의 컴포넌트들은 트리구조로 되어있으며, 해당 컴포넌트 별로 렌더링을 진행하여 컴포넌트들을 트리구조로 관리하게 된다.
7. root 컴포넌트에 .render( ) 메소드를 통해 특정 App 을 렌더링 하도록 한다.
8. 해당 App 컴포넌트는 App.jsx에서 import 된다.
9. App.jsx 의 App 함수는 html 코드를 가지고 있다.