24 컴포넌트 전략

리액트의 컴포넌트 전략

리액트 컴포넌트 전략은 재사용성, 유지보수성, 성능을 극대화하여 효율적으로 애플리케이션을 구축하기 위한 다양한 설계 원칙과 패턴을 의미합니다. 다음은 대표적인 리액트 컴포넌트 전략입니다. 1. 컴포넌트 분리 원칙

• 단일 책임 원칙(SRP, Single Responsibility Principle): 하나의 컴포넌트가 하나의 역할만 수행하도록 설계합니다. 예를 들어, 데이터 요청 로직과 UI 렌더링 로직을 분리하면 컴포넌트가 더 간결해지고 재사용성이 높아집니다.
• 원자적 디자인(Atomic Design): UI를 원자(atoms), 분자(molecules), 유기체(organisms), 템플릿(templates), 페이지(pages)의 5단계로 나누어 계층적으로 컴포넌트를 설계합니다.
  • 원자(Atomic): 버튼, 입력창 등 더 이상 분해할 수 없는 가장 작은 단위.
  • 분자(Molecules): 원자를 조합하여 만든 검색창과 같은 단위.
  • 유기체(Organisms): 분자들을 조합하여 만든 헤더, 푸터와 같은 단위.
  • 템플릿(Templates): 유기체로 페이지의 레이아웃을 구성하는 단계.
  • 페이지(Pages): 실제 데이터가 적용된 최종 화면. 2. 컴포넌트 패턴
• 컨테이너/프리젠테이셔널 패턴(Container/Presentational Pattern):
  • 프리젠테이셔널 컴포넌트: 데이터나 로직 없이 UI만 렌더링하는 역할.
  • 컨테이너 컴포넌트: 데이터 관리, 상태 로직 처리, API 호출 등을 담당하고, 프리젠테이셔널 컴포넌트에 props를 전달합니다.
• 고차 컴포넌트(HOC, Higher-Order Component): 컴포넌트를 인수로 받아 새로운 컴포넌트를 반환하는 함수. 컴포넌트 간 로직을 재사용하는 데 유용하지만, 최신 React에서는 커스텀 훅이 더 선호됩니다.
• 렌더 프롭스 패턴(Render Props Pattern): 자식 컴포넌트에게 props로 함수를 전달하여 로직을 공유하는 방식.
• 컴파운드 컴포넌트 패턴(Compound Component Pattern): <Select>와 <Select.Option>처럼 함께 사용될 때 강력한 기능을 제공하는 컴포넌트 그룹을 만드는 패턴. Context API를 활용해 내부 상태를 공유합니다.
• 커스텀 훅 패턴(Custom Hook Pattern): 여러 컴포넌트에서 재사용되는 로직을 use로 시작하는 함수로 분리하는 전략. 상태 관리, 비즈니스 로직 등 특정 기능을 추상화하여 코드의 재사용성을 높입니다. 3. 성능 최적화 전략
• 렌더링 전략 선택:
  • 클라이언트 컴포넌트: 사용자와 상호작용이 필요한 동적 UI를 렌더링.
  • 리액트 서버 컴포넌트(RSC): 서버에서 미리 렌더링되어 클라이언트에 전송되는 컴포넌트. 자바스크립트 번들 크기를 줄여 초기 로딩 속도를 향상시킵니다.
• 불필요한 리렌더링 방지:
  • React.memo: props가 변경되지 않으면 컴포넌트의 리렌더링을 건너뛰도록 합니다.
  • useMemo: 계산량이 많은 값의 결과를 메모이제이션하여 재계산을 방지합니다.
  • useCallback: 의존성이 변경되지 않으면 함수의 재생성을 방지하여 자식 컴포넌트의 불필요한 리렌더링을 막습니다.
• 상태 끌어올리기(Lifting State Up): 여러 컴포넌트가 동일한 상태를 공유해야 할 때, 공통의 부모 컴포넌트로 상태를 이동시키는 전략.
• 상태 관리: 컴포넌트 간 상태 공유가 복잡해질 경우, Context API 또는 Redux, Zustand 같은 전역 상태 관리 라이브러리를 사용합니다.