컴포넌트-전략

코드 블록의 Try it Yourself 버튼으로 직접 실행할 수 있다.

구문

리액트의 컴포넌트 전략

리액트 컴포넌트 전략은 재사용성, 유지보수성, 성능을 극대화하여 효율적으로 애플리케이션을 구축하기 위한 다양한 설계 원칙과 패턴을 의미합니다. 다음은 대표적인 리액트 컴포넌트 전략입니다. 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 같은 전역 상태 관리 라이브러리를 사용합니다.

컴포넌트-전략

코드 블록의 Try it Yourself 버튼으로 직접 실행할 수 있다.

구문

리액트의 컴포넌트 전략

단일 책임 원칙(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 같은 전역 상태 관리 라이브러리를 사용합니다.