디자인 패턴

 

React의 대표적인 디자인 패턴은 다음과 같다.

1. Container-Presenter 패턴: 컴포넌트를 두 가지로 나누어, 하나는 데이터 로직을 처리하는 Container 컴포넌트, 다른 하나는 UI를 렌더링하는 Presenter 컴포넌트로 분리한다.
2. Higher-Order Components (HOC): 컴포넌트를 인수로 받아서 새로운 컴포넌트를 반환하는 함수이다.
   주로 코드 재사용성을 높이기 위해 사용된다.
3. Render Props: 컴포넌트의 자식으로 함수를 전달하여, 그 함수를 통해 컴포넌트의 렌더링 로직을 정의하는 패턴이다.
4. Custom Hooks: React의 Hook 기능을 사용하여 재사용 가능한 로직을 추출하는 패턴이다.
5. Compound Components: 여러 개의 작은 컴포넌트를 조합하여 하나의 큰 컴포넌트를 구성하는 패턴이다.

이 패턴들은 React 애플리케이션의 구조를 더 명확하고 유지보수하기 쉽게 만들어준다.