React & Typescript / CRA

seunghyun·2025년 1월 6일

타입스크립트

자바스크립트 기반
(엄격한) 정적 타입 검사를 해주고 js처럼 추상적이지 않고 구체적인 에러 메시지를 내뱉아서 큰 프로젝트 관리에도 좋은 인기가 많은 녀석
브라우저는 js만 읽을 수 있으므로 무조건 타입스크립트 컴파일러에 의해 자바스크립트 코드로 컴파일된다. tsc -w
tsconfig.json 은 ts -> js 컴파일 시 옵션 설정 가능

compilerOptions
- target : es5
- module : CommonJS

리액트

리액트 컴포넌트를 사용할 때 그 아래에서 동작하는 구조를 알아야 한다.

웹 개발 때 DOM, CSSOM 수정횟수를 최대한 줄여서 repaint, reflow 횟수를 최대한 줄이는게 중요하다. 내부적으로 한번에 모아서 업데이트해주게 해주는 등.. 리액트가 이걸 해준다 (추상화되어있음)
별도의 렌더링 프로세스
- Render Phase : React 컴포넌트가 렌더링 해야 하는 UI를 Virtual DOM이라는 객체 값으로 변환하는 과정.
  component호출을 통해서 react element를 얻게 됨.
  모든 react element를 모아 Virtual DOM을 만들어줌.
  업데이트 발생 시 처음부터 다시 실행해 새로운 Virtual DOM을 만들어줌. (Reconciliation)
- Commit Phase: 변경사항(Virtual DOM)을 실제로 Actual DOM에 반영

우리도 모르게 내부적으로 자동화되어있다. 왜 이렇게 하냐면 DOM 수정을 최소화하기 위해서이다. 대부분의 업데이트에 대해 빠르게 대응해줌 (항상은 아님) (Reconciliation도 결국 비교..의 과정이 있어서 이런 게 없는 Svelte가 더 빠르다고도 함)

설치

최신 버전으로

# STEP1
sudo apt-get install node # Ubuntu
brew install node # Mac
node -v # v22.12.0

sudo apt-get install npm # Ubuntu
npm -v # 10.9.0

sudo npm install -g npx # Ubuntu
npm install -g npx # Mac
npx -v # 10.2.2
# 안되서 한거: sudo npm install -g npx --force

# STEP2
npm install -g yarn

# STEP3
yarn create react-app 폴더명 --template typescript

# STEP4
cd 폴더명
yarn start