*잠깐, 이 글을 소개해드리는 위시켓은 2019년 시밀러웹 방문자 수 기준, 국내 1위 IT아웃소싱 플랫폼입니다. 현재 9만 이상의 개발업체, 개발 프리랜서들이 활동하고 있으며, 무료로 프로젝트 등록이 가능합니다. 프로젝트 등록 한 번으로 여러 개발업체의 견적, 포트폴리오 예상기간을 한 번에 비교해보세요📝

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

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

2022년 필수 리액트 패턴 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가지 고급 ‘리액트 패턴’을 통해 “제어의 역전”이라는 개념이 어떻게 활용되고 있는지 다양한 사례를 통해 알아봤습니다. 각각의 ‘리액트 패턴’은 더 유연하고 쉽게 적용할 수 있는 강력한 컴포넌트를 만들 수 있도록 도와줍니다.

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

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

국내 1위 IT아웃소싱 플랫폼,

위시켓이 궁금하신가요?