프론트엔드
React 이해하기
두줄요약
React의 컴포넌트, props, state, 선언형 렌더링과 reconciliation 흐름을 설명했습니다. 렌더링 최적화와 Hook 기반 상태 관리 시 주의점을 함께 다뤘습니다.
구조와 흐름
- UI 생성을 위한 JavaScript 라이브러리 React와 DOM 조작 복잡성의 배경
- JSX 기반 컴포넌트 단위의 마크업·로직 결합, props 전달, React element와 ReactDOM 렌더링 흐름
- state 변경 후 render와 reconciliation을 거치는 선언형 UI 갱신 구조
성능/운영 포인트
- 비동기적 setState 스케줄링과 부모 재렌더링에 따른 자식 컴포넌트 재렌더링
- shouldComponentUpdate, PureComponent, memo를 활용한 props 얕은 비교 기반 렌더링 최적화
- 변경 불가능한 상태 갱신과 immer 활용, reconciliation 기반 최소 DOM 변경
주의할 점
- PureComponent의 참조값 얕은 비교에서 배열·객체 직접 변경 시 화면 미갱신 가능성
- useState 상태 갱신 시 클래스 컴포넌트 setState와 달리 이전 객체 상태 자동 병합 부재
적용해볼 점
- useState·useEffect 기반 함수 컴포넌트와 custom hook을 통한 상태 로직 재사용
- useReducer로 reducer 기반 상태 전이 구성, useMemo로 계산값 최적화
