5가지 최신 고급 리액트 패턴 - ② Props Getters, State reducer

안녕하세요.

국내 1위 IT아웃소싱 플랫폼 위시켓입니다.

 

오늘은 지난 글에 이어서 5가지 리액트 패턴 중에서 Props Getters, State reducer 패턴에 대해서 코드 구현, 각각의 장단점, 공개 라이브러리와의 구체적인 사용법에 대해 알아볼 예정입니다.

 

혹시 이전 글을 못 읽으셨다면 하단 링크를 통해서 읽어보세요!

[개발 꿀팁] - 5가지 최신 고급 리액트 패턴 - ① Compound Component, Control Props, Custom Hook

 

 

---

4. Props Getters 패턴

이 패턴은 아주 강력한 제어권을 주는 반면 컴포넌트를 통합하기가 더 어렵습니다. 사용자는 네이티브 훅의 많은 props를 직접 다루고 스스로 로직을 다시 만들어야 합니다. Props Getters 패턴은 이러한 복잡성을 감추기 위해 기본 props를 노출하는 대신 props getter의 목록을 제공합니다. getter는 많은 props를 반환하는 함수이며, 사용자가 쉽게 올바른 JSX 요소에 연결할 수 있도록 의미 있는 이름을 제공합니다.

 

ㅣ 예제

• Github: https://github.com/alex83130/advanced-react-patterns/tree/main/src/patterns/props-getters

ㅣ 장점

• 쉬운 사용 : 컴포넌트를 통합하는 쉬운 방법을 제공하고 복잡성을 숨깁니다. 사용자는 올바른 getter를 올바른 JSX 요소에 연결하기만 하면 됩니다.

 

 

• 유연성: 특정한 유스케이스를 위해 필요한 경우 사용자는 getter에 포함된 props를 재정의할 수 있습니다.

 

ㅣ 단점

• 가시성 부족: getter가 제공하는 추상화로 인해 컴포넌트를 더 쉽게 구현할 수 있지만, 내부가 보이지 않는 "마법 상자"처럼 느껴질 수 있습니다. 컴포넌트를 올바르게 재정의하려면 사용자는 getter에 의해 노출되는 props 목록이 무엇인지 알고 그중 하나가 변경될 때 내부 로직에 미치는 영향을 인지해야 합니다.

 

ㅣ 평가 항목

• 제어의 역전: 3/4
• 구현의 복잡성: 3/4

 

ㅣ 이 패턴을 사용하는 라이브러리

•  React table
• Downshift

 

5. State reducer 패턴

제어의 역전 측면에서 가장 고급 패턴입니다. 이는 사용자에게 컴포넌트 내부의 동작 방식을 변경할 수 있는 진보된 방법을 제공합니다. 코드는 Custom Hook 패턴과 유사하지만, 사용자가 훅에 전달하는 reducer를 정의합니다. 이 reducer는 컴포넌트의 내부 행동을 오버 로드합니다.

 

ㅣ 예제

• Github: https://github.com/alex83130/advanced-react-patterns/tree/main/src/patterns/state-reducer

이 예제에서 우리는 State reducer 패턴과 Custom hook 패턴을 같이 사용했지만, Compound components 패턴과 함께 사용하여 reducer를 메인 컴포넌트 Counter에 직접 전달할 수도 있습니다.

 

ㅣ 장점

• 더 많은 제어권 부여: 가장 복잡도가 큰 경우에도 state reducers를 사용하는 것이 사용자에게 제어권을 넘기는 가장 좋은 방법입니다. 이제 모든 내부 컴포넌트 작업을 외부에서 접근할 수 있으며 재정의하는 것 또한 가능합니다.

 

 

ㅣ 단점

• 구현의 복잡성: 이 패턴은 확실히 컴포넌트 개발자와 사용자 모두에게 가장 난이도가 높은 구현 방식입니다.
• 가시성 부족: reducer의 동작은 변경될 수 있으므로 컴포넌트의 내부 로직에 대한 깊은 이해가 필요합니다.

 

ㅣ 평가 항목

• 제어의 역전: 4/4
• 구현의 복잡성: 4/4

 

ㅣ 이 패턴을 사용하는 라이브러리

• Downshift

 

ㅣ 결론

이 5가지 고급 React 패턴을 통해 "제어의 역전"이라는 개념이 어떻게 활용되고 있는지 다양한 사례를 통해 알아봤습니다. 각각의 패턴은 더 유연하고 쉽게 적용할 수 있는 강력한 컴포넌트를 만들 수 있도록 도와줍니다.

 

그러나 우리 모두는 "큰 힘에는 큰 책임이 따른다"라는 유명한 격언을 알고 있으며, 사용자에게 더 많은 제어권을 준다는 것은 컴포넌트가 "플러그 앤 플레이" 접근방식에서 멀어짐을 의미합니다. 올바른 요구사항에 만족하는 올바른 패턴을 선택하는 것은 개발자로서의 여러분의 몫입니다.

 

이를 돕기 위해 아래 제시된 도표는 "구현의 복잡성"과 "제어의 역전"이라는 두 가지 평가 항목을 기준으로 앞서 소개한 모든 패턴의 위치를 보여줍니다.

 

---

이 글은 국내 1위 IT아웃소싱 플랫폼 위시켓에서 발행한 글입니다.

위시켓은 9만 명의 IT전문가와 함께하고 있어

다양한 카테고리의 IT전문가를 빠르고 안전하게 만나보실 수 있습니다.

 

위시켓에 대해 더 궁금하시거나, 빠르게 IT전문가를 만나보고 싶으신가요?

 

※ 참고문헌

01. Alexis Regnaud. 5 Advanced React Patterns