React 이해하기

Context

웹 초창기에는 DOM의 구성요소가 적어 getElementById와 addEventListener를 사용한 명령형 프로그래밍으로 충분했으나, 웹 페이지가 많은 노드와 이벤트로 구성되면서 UI 로직과 마크업을 분리하면서도 유지보수하기 어려워졌다.

Technical Solution

• 컴포넌트 기반 아키텍처 도입: 로직과 마크업을 별도 파일로 분리하는 대신 JSX를 통해 하나의 유닛(컴포넌트) 안으로 통합하여 관심사 분리
• JSX 문법 제공: Babel을 통해 JSX를 React.createElement()로 변환하여 HTML을 JavaScript 내부에서 작성 가능하게 구조화
• 선언형 UI 구성 방식 채택: 상태 변경 시 "어떻게" 보일지 명령하는 대신 "무엇"이 보이면 되는지만 작성하도록 변경
• setState 비동기 처리 및 스케줄링: 여러 setState 호출이 한 번의 render 함수 호출로 배치되어 렌더링 최적화
• shouldComponentUpdate와 PureComponent, memo를 통한 불필요한 리렌더링 방지: props가 변경되지 않은 자식 컴포넌트의 렌더링 스킵
• Hooks 도입 (useState, useReducer, useMemo): 함수형 컴포넌트에서 상태 관리를 가능하게 하고 class 컴포넌트의 복잡한 생명주기 메서드 제거

Key Takeaway

선언형 UI 패러다임과 컴포넌트 기반 설계는 복잡한 웹 애플리케이션에서 상태와 렌더링 로직을 분리하여 코드 가독성과 디버깅 용이성을 크게 향상시킨다.