[D.Velkit] - Custom Hooks 디자인 패턴

 

프로젝트를 시작하기에 앞서

디자인 패턴을 어떻게 잡을지에 대한 고민을 꽤 많이 했다.

규모가 꽤 있는 프로젝트는 처음이었기 때문에

 무턱대고 진행했다가는 불상사를 겪을 수 있겠다는 마음이었다.

 

 

결과적으로 커스텀 훅 디자인 패턴을

적용하기로 결정했고

실제로도 프로젝트 중반까지는 잘 지켜졌지만

그 후엔 로직이 복잡해지면서

커스텀 훅을 만드는 것 자체에 어려움을 느꼈다.

(역량 부족 이슈..)

 

 

CUSTOM HOOK 패턴이란?

 

 

위와 같이 

pages를 폴더별로 나눠 

UI가 렌더링되는 부분을 index.jsx로 따로 두고

렌더링되는 부분이 복잡해지면 

파트별로 구분해 components폴더안에 둔다.

그리고

hooks 폴더안에 메인로직을 둔 상태에서

제어하는 것이다.

 

 

위와 같은 패턴의 장점은 

로직과 렌더링이 분리되어 

컴포넌트 내부를 들여다봤을 때 깔끔하고

또한 hooks를 통해 가져온 함수나 데이터들을

컴포넌트 안에서 조작하여 가공할 수 있다는 점이라고는 하나

결과적으로 이 프로젝트에서는

옳은 선택이었다고 보기 어렵다.

 

 

그 이유는

파일내부는 깔끔할 지언정

폴더구조 자체가 좀 어지럽다....

 

그리고 이러한 패턴을 

사용하기 위해서는

컴포넌트의 동작원리를 

완벽히 이해하고 있어야하기 때문에

제대로 활용하지 못했다.

 

 

또한 

위 사진과 같이

전역에서 사용하는 hooks 폴더를 따로 두었기 때문에

각 page에서 전용으로 사용하는 hooks따로있고

전역으로 사용하는 hooks가 또 있는 모양이 된것이다.

 

 

로직과 UI를 구분한다는 장점은 있었으나

그에 비해 단점이 꽤 컸다고 생각하여 아쉬움이 남는다.

 

 

다음 프로젝트를 할 때는

장점은 살리면서도 

단점은 최소화하는 패턴으로 고려를 해봐야 될 것 같다.