221110 Ioc 패턴

리액트 개발에서 컴포넌트의 확장성과 유연성을 높이기 위해 IoC(Inversion of Control) 패턴을 적용하여 제어권을 사용자에게 넘기는 방법을 소개한다. 기존 컴포넌트 수정 없이 다양한 요구사항에 대응할 수 있도록 렌더링과 상태 관리 두 가지 관점에서 5가지 주요 패턴을 분석했다.

렌더링 제어 패턴

Render Props 패턴은 렌더링 함수를 프로퍼티로 전달해 컴포넌트 내부의 렌더링 로직을 외부에서 정의하는 방식이다. 리스트나 테이블처럼 동일한 렌더링 구조가 반복되는 경우에 유용하지만, 복잡한 조건부 렌더링에는 제한이 있으며 함수 호출 방식에 따라 훅 사용에 주의가 필요하다.

Compound Component 패턴은 Context와 Provider를 활용해 여러 하위 컴포넌트가 하나의 로직을 공유하도록 구성한다. 버튼 위치 변경 등 UI 구조가 유연하게 바뀌어야 할 때 효과적이며, 각 컴포넌트가 단일 책임 원칙(SRP)을 지키며 독립적으로 사용될 수 있다. 다만 Context 구성으로 인한 복잡도 증가와 컴포넌트 개수 증가가 단점이다.

상태 관리 제어 패턴

Controlled Props 패턴은 내부 상태 대신 외부에서 전달된 프로퍼티와 콜백 함수로 상태를 제어한다. useControlled 커스텀 훅을 통해 내부 상태와 외부 제어 상태를 자연스럽게 전환할 수 있으며, 단순한 입력 컴포넌트에 적합하다. 그러나 상태와 콜백이 많아질 경우 프로퍼티가 복잡해지는 문제가 있다.

Props Getter 패턴은 상태와 콜백 함수를 커스텀 훅으로 묶어 반환함으로써, 사용자가 필요한 콜백만 오버라이드하고 나머지는 기본값을 사용하도록 한다. 중복 로직을 줄이고 복잡한 컴포넌트도 쉽게 제어할 수 있게 해준다.

State Reducer 패턴은 useReducer를 활용해 상태 변경 로직을 reducer 함수로 분리하고, 외부에서 reducer를 주입받아 내부 reducer와 결합하여 사용한다. 콜백 프로퍼티의 개수와 상관없이 단일 reducer 프로퍼티만으로 모든 상태 변경을 제어할 수 있어 가장 간결한 사용성을 제공한다.