[2장] 고차 컴포넌트를 자주 사용하시나요??

[chhw130]

🧐 Question

고차 컴포넌트를 자주 사용하시나요??

고차 컴포넌트는 이번 챕터에서 고차함수를 이용한 것처럼 훅이 생기기 이전까지 많이 사용을 했다고 하는데요. 그런데 훅의 도입 이후 고차 컴포넌트 사용을 지양하라는 말을 리액트 공식문서에서 찾아 볼 수 있었고, 다른 기술 블로그에서는 유용하게 사용되는 케이스도 찾아 볼 수 있었는데요.

• 그렇다면 고차 컴포넌트가 권장되지 않는 이유?
• 사용하고 있다면 어떻게 사용하고 있는지?

얘기나눠보면 좋을 거 같습니다!

📝 Reference

리액트 공식문서 중

고차 컴포넌트에 관한 화해 블로그

[horang-e]

오... 지양되고 있다는 사실은 처음 알았어요..! 😮

저는 React.memo를 사용하고 공부하면서 React.memo가 고차 컴포넌트이고 고차 컴포넌트를 사용하면 컴포넌트의 불필요한 리랜더링을 방지한다는 사실을 알았습니다. 그래서 아무튼 저는HOC인 React.memo를 사용합니다!

지양되고 있다면 아마 React에서 함수형 컴포넌트를 지향하기 시작한 시점부터이지 않을까 싶습니다. 원래 기존에 HOC를 통해 해결해고자 했던 문제들을 더 간단하고 사이드 이펙트 없이 react hooks를 통해 해결해 버렸기 때문일거라고 생각합니다.

React.memo는 왜 살아남아있는지에 대한 부분은 제가 클로드한테 물어본 내용을 공유드릴게요!

• React.memo는 "순수 함수형 컴포넌트"를 최적화하는 데 특화된 HOC입니다. 이는 함수형 프로그래밍 패러다임과 잘 맞습니다.
• 다른 복잡한 HOC들과 달리 React.memo는 컴포넌트의 로직을 변경하지 않고 단순히 메모이제이션 기능만 추가합니다.
• 따라서 React.memo는 HOC의 일반적인 단점들(복잡성, 래퍼 지옥 등)을 크게 겪지 않습니다.

React.memo

[kimfield98]

저는 FO쪽에서는 훅을 통해 데이터 불러오는 로직을 관리하고, BO쪽에서 고차함수 방식을 사용해 관리를 합니다.

<구현 방식>

1. withPageContext라는 고차 컴포넌트를 만들어 페이지네이션, API 호출, 상태 관리 등의 공통 로직을 처리합니다.
2. 이 HOC는 PageProvider를 사용하여 컴포넌트를 감싸고, API 호출과 상태 관리 로직을 제공합니다.
3. PageContext를 통해 상태와 액션을 하위 컴포넌트에 전달합니다. 이를 통해 각 페이지 컴포넌트는 필요한 데이터와 액션을 쉽게 사용할 수 있습니다.
4. URL 쿼리 파라미터를 자동으로 파싱하여 API 호출에 사용합니다. 이로 인해 페이지네이션, 정렬, 필터링 등의 상태가 URL에 반영되어 페이지 새로고침이나 공유 시에도 상태가 유지됩니다.
5. 데이터 로딩 상태, 에러 처리 등의 공통 로직도 HOC 내부에서 처리하여 각 페이지 컴포넌트의 코드를 간결하게 유지합니다.
6. 필요에 따라 defaultParams를 설정할 수 있어, 각 페이지의 특성에 맞는 초기 파라미터를 쉽게 설정할 수 있습니다.

<요약> ⭐️ withPageContext를 export 하는 컴포넌트에 씌워주는 형태로 사용 ⭐️

<장점>

1. 백오피스는 관리자 페이지이기 때문에 여러 페이지에서 반복되는 패턴(예: 리스트 조회, 페이지네이션, 필터링 등)이 많습니다.
2. 고차 컴포넌트를 사용하면 이러한 공통 로직을 한 곳에서 관리하고 여러 컴포넌트에 쉽게 적용할 수 있습니다.
3. 특히 페이지네이션, 데이터 로딩 상태 관리 등의 복잡한 로직을 추상화하여 재사용성을 높일 수 있습니다.

처음에는 훅이 아닌 고차함수 방식의 코드 베이스를 이해하기 어려워 한참 헤맸었는데, (추상화가 많이 되어있다고 느낌) 한 번 이해하고 사용하다보니 코드가 훨씬 깔끔해져서 다른 로직만 신경써도 되어 좋다고 느꼈습니다! 혼자 구현하라고 하면 아직 어려울 것 같긴 하네요 :)

[jasongoose]

hook만으로 구현할 수 없는 고차 컴포넌트만의 3가지 기능들을 정리한 아티클 하나 공유드립니다!

아티클 내용을 요약하면 다음과 같습니다~

• 컴포넌트는 원래 정의한대로 사용하되 플러그인을 설치하는 듯한 효과를 줄 수 있습니다.
• 동일한 DOM Event의 핸들링 로직을 여러 컴포넌트에서 사용하려는 경우에 유용합니다.
• 특정 context의 value만을 받아서 사용할 수 있는 context selector 컴포넌트를 구현할 수 있습니다.

---

https://www.developerway.com/posts/higher-order-components-in-react-hooks-era