React 핵심 원리와 Hook 활용법: 컴포넌트 구조부터 상태 관리 및 최적화까지

프론트엔드 개발은 React 등장 이후 패러다임이 변화했다. React는 DOM 조작을 추상화하여 선언형(declarative) 방식으로 UI를 구성하며, JSX를 통해 마크업과 로직을 하나의 컴포넌트로 통합한다. 상태 변경 시 setState의 비동기적 처리와 Reconciliation 알고리즘을 통해 실제 DOM 변경을 최소화함으로써 성능을 확보한다.

Hook을 통한 로직 재사용과 최적화

Class 컴포넌트의 복잡성을 줄이기 위해 도입된 Hook은 Functional 컴포넌트에서 상태와 생명주기를 관리할 수 있게 한다. useState는 이전 상태와 새로운 상태를 자동으로 병합하지 않으므로 주의가 필요하며, useEffect는 렌더링 완료 후 실행되는 사이드이펙트를 처리한다. HOC나 Render Props 방식의 Wrapper Hell 문제를 해결하기 위해 커스텀 Hook을 활용해 로직을 공유할 수 있다.

성능 개선 전략

불필요한 렌더링을 방지하기 위해 Class 컴포넌트에서는 PureComponent를, Functional 컴포넌트에서는 React.memo를 사용하여 Props의 얕은 비교(shallow comparison)를 수행한다. 또한 useMemo를 활용해 의존성 배열 기반의 계산 결과를 메모이제이션함으로써 연산 비용을 절감할 수 있다. 컬리 프론트엔드 팀은 이러한 React 기술 스택을 기반으로 다양한 과제를 수행하고 있다.