프론트엔드
React 이해하기
두줄요약
React의 컴포넌트, JSX, props, state로 선언형 UI를 구성하는 방식을 설명했습니다.\n재조정·얕은 비교·Hook을 통한 렌더링 최적화와 상태 로직 재사용을 다뤘습니다.
구조와 흐름
- 컴포넌트 단위로 로직과 마크업을 JSX에 함께 구성하고 props로 데이터 전달
- React element 생성 후 ReactDOM을 통한 실제 DOM 반영
- state·props 갱신, render, reconciliation으로 이어지는 선언형 UI 갱신 흐름
선택 이유
- 복잡한 UI를 독립적인 컴포넌트 단위로 분리하는 관심사 관리
- DOM 조작 절차 대신 상태에 따른 화면 결과를 기술하는 선언형 방식
- Hook과 custom hook을 통한 상태 로직 재사용 및 wrapper hell 완화
성능/운영 포인트
- setState 스케줄링으로 여러 상태 변경의 render 호출 최소화
- shouldComponentUpdate, PureComponent, memo의 얕은 비교 기반 불필요한 rerender 억제
- reconciliation과 Virtual DOM 기반 최소 DOM 변경
주의할 점
- PureComponent·memo의 참조값 얕은 비교를 위해 배열·객체의 불변성 유지
- useState 상태 갱신 시 class setState와 달리 기존 객체 상태 자동 병합 부재
- useEffect 의존성 배열과 이벤트 리스너 정리 함수 관리
