[React] 가상 DOM과 JSX

1. React.createElement() 와 JSX

JSX == 정리된 createElement, 둘은 결국 같음.

JSX는 HTML처럼 보이지만, 내부적으로는 React.createElement() 호출로 변환되는 문법이다.

직접 createElement를 활용해 쓸 수도 있지만, JSX가 훨씬 가독성이 좋고 생산성이 높기 때문에 실무에서는 99.9% JSX로 작성함!

2. 가상 DOM & 렌더링 흐름

React는 가상 DOM으로 바뀐 부분만!! 바꾼다.

React는 컴포넌트 상태가 바뀌면 새로운 가상 DOM 트리를 만들고, 이전 가상 DOM과 비교해서 실제 DOM에서 바꿔야 할 최소한의 부분만 업데이트한다.

이 과정 덕분에 전체 화면을 다시 그리는 일 없이도 빠르고 효율적으로 화면 업데이트가 가능하다.

3. JSX 문법과 규칙

JSX는 HTML처럼 보이지만, 사실 Javascript다.

• JSX 안에서는 {}로 JS 표현식을 넣는다.
• class는 className, for는 htmlFor로 써야 함.
• 컴포넌트는 반드시 하나의 부모 요소로 감싸야 하며, 필요하면 <></> (fragment tag)로 묶을 수 있음.
• 조건문은 if 대신 삼항 연산자나 &&, 반복문은 map()을 써야 함.

중요한 점

React는 선언형 방식으로 UI를 만들고, 가상 DOM으로 최소한의 변경만 실제 DOM에 반영한다.

주의할 점

"리액트 웹앱만들기 with 타입스크립트" 책으로 학습을 했는데, react 17 기준이라 초기 렌더링 방식이 달라졌다는 걸 반드시 인지해야할 것 같고(2024년 3월 개정 1판 버전 학습 중),

책에서는 프로젝트 세팅을 CRA로 시작하는데 1년 전부터 공식에서도 Vite를 추천하는 것을 확인을 했다. CRA good bye~

node.js 사용하면 이렇게 세팅하면 됨

npm create vite@latest 프로젝트이름 -- --template react-ts