개요

작년 5월 쯤인가... 야심차게 내가 맨바닥에 머리를 부딪혀보겠다!!!! 하면서 거하게 삽질을 해놓은 쇼핑몰 프로젝트가 있습니다.

리액트를 썼다는데... 보이는 건 수많은 쿼리셀렉터와...id와....

하여간. 내 깃허브 레포지토리에서 지워버리고 싶은 흑역사인데, 그렇기에 처음을 기억하고자 항상 남겨놓고 있습니다.

그 와중에, 그나마 건질 수 있었던 건 유저의 인가를 담당하는 hoc 뿐..

무의식적으로 hoc는 곧, 각 컴포넌트에 대해 공통된 인가 로직을 사용할 수 있게 해주는 이른바 '대모'라는 생각을 가지고 있었는데.

사실 그렇다면, 인가 로직 뿐만 아니라 다른 로직들도 충분히 재사용되면서 사용될 수 있는 것이 아냐? 라는 생각에 닿았습니다.

아, 그렇다면 내가 고차 컴포넌트가 뭔지 제대로 설명을 못하겠구나. 라는 결론에 닿아 정리해봅니다.

Higher Order Component

From... https://reactjs-kr.firebaseapp.com/docs/higher-order-components.html

결국 남이 잘해둔 것을 모아 레고를 조립하듯 만든다는 나의 신념(?!)에 맞게, 개발자들은 항상 어떠한 서비스를 이용할 때 그 공식 문서를 읽어야 된다고 생각합니다.

어떠한 패러다임... 같은 것이 아니라 그냥 리액트의 컴포넌트 지향적인 성격에 따라 파생된 어떠한 패턴이라는 얘기인 것 같습니다.

먼 옛날(?) 제가 만들어둔 고차 컴포넌트입니다.

보다시피 컴포넌트와 옵션을 받고, 컴포넌트의 이름과 옵션의 boolean값을 통해 컴포넌트가 인가가 필요한 것인지 확인하고, 서버로부터 인가여부를 전달받아 문제가 없다면 해당 컴포넌트를 그대로 반환합니다.

즉, 컴포넌트를 전달받아 어떠한 재사용 가능한 로직을 수행하고, 그 결과를 컴포넌트로 반환하는 것이 '고차 컴포넌트'라고 할 수 있습니다.

HOCs vs Hook

그런데 잠깐만... 저는 사실 custom hook이 더 익숙합니다.

재사용해야하는 로직, 이를테면 통신이 될 수 있고 아니면 관심사의 분리만을 위한.. 특정 컴포넌트만을 위한 훅이 될 수도 있고. 아니면 유저의 인가에 필요한 로직이 있을 수도 있겠죠.

차이점을 명확히 생각한다면, Context API로 컴포넌트에 값을 전달하느냐, 또는 props로 개별적으로 전달하느냐? 와 비슷하다고 생각합니다.

HOC는 특정 컴포넌트들을 한 데 묶어, 해당 컴포넌트에 일회성으로 발생할 수 있는 로직을 재사용하여 적용할 겁니다.
다만 custom hook은 각 개별 컴포넌트에서 각각 적용되어야하는 친구들이죠.

여러 게시물을 읽으며.. 드는 생각은 그겁니다.

HOC는 다소 정적인. props가 많이 필요하지 않고 변경될 가능성이 적은 일회성 로직이 여러가지 컴포넌트에 겹쳐서 사용되고 있을 때 사용하면 그 역할에 맞게 활약을 할 것이다.

반면 custom hook은 각 개별 컴포넌트에 따라 동작이 달라질 수 있으며, props가 여러 개이거나 한 경우에 유리하다.

React를 공부하면서 느끼는 건 결국 근본은 component와 state에 있고, 레이아웃을 설계한다거나.. 그런 건 솔직히 크게 중요한 부분이 아니고. 얼마나 비동기의 함정에 빠지지 않으면서 state를 잘 관리할 수 있도록 컴포넌트를 설계할 줄 아느냐? 가 중요한 부분 중 하나다 라고 생각하고 있습니다.

그러니까 결론은?

HOC든, Custom hook이든 잘못된 방식이란 건 없습니다.
경우에 맞게 알맞게 사용한다면 잘 사용한 게 될 것입니다.
단순한 문제에 대해 Custom hook을 사용한다면 자칫 빈번히 사용하게 되어 코드의 길이를 늘릴 수도 있고
어려운 문제에 대해 HOC를 적용했다가 거대한 시행착오를 겪을지도 모를 일이죠.
그러니까... 당장 개발을 하기 전에.
내가 구현하고자 하는 컴포넌트에 몇 가지 props가 전달될까?
과연 이 컴포넌트가 재활용을 할 수 있는가?
너무 과하게 공통된 로직이 개별적으로 작성되고 있진 않은가?
혹은, 유사성이 높진 않은 컴포넌트나 로직을 애써 재사용하려고 하고 있는 것은 아닌가?
에 대해서 항상 의심해야겠다!

참고 링크

https://devcore.io/en/react/hocs-vs-hooks-what-to-use-and-why/
https://medium.com/javascript-scene/do-react-hooks-replace-higher-order-components-hocs-7ae4a08b7b58