왜 리액트를 배우는가?
- 수정의 용이함
바닐라 JS나 html에서 여러 부분을 동시에 고쳐야 하는 Shotgun Surgery 상황에서 일일이 모든 코드를 수정해야하는 반면 리액트는 컴포넌트를 통해 문제가 생긴 부분만 수정함으로써 코드의 생산성을 향상시킬 수 있다.
- 짧은 코드
선언형 프로그래밍을 도입함으로써 코드의 전체 길이를 줄이고 이해하기 쉬운 코드를 만들 수 있다. - 가상 돔 (virtual dom)
바닐라 JS에서는 DOM을 조작할 때 마다 DOM을 수정하기 때문에 잦은 DOM 업데이트 시 연산에 과부하가 와 성능 저하와 사용자 경험 저하를 겪을 수 있다. 하지만 React는 가상 돔 기능을 도입해 필요할 때마다 업데이트를 함으로써 성능 향상을 이뤄낼 수 있다.
리액트 앱 설치
- 설치 및 구동 확인
- JSX 사용 기초
React에서 JS를 쓰는 방식, 기존 JS와는 사용방식에 조금 차이가 있다.
- 스테이트 사용 기초
리액트에서 변수를 관리하는 방식, 리액트 자체의 State 컴포넌트를 활용하여 변수의 연산이나 변화를 감지한다.
- Prop 사용 기초
리액트에서 매개변수를 전달하는 방식, 기존 문법과의 차이가 있으며 좀 더 직관적으로 데이터나 속성을 매개변수로 활용할 수 있다.
개발 초보