<aside> 💡 React를 이용한 개발에서 View를 담당하는 부분과 로직을 담당하는 부분을 구분해야 할 필요를 느껴 Custom Hooks로 만들어 관리하기로 결정했어요.

</aside>

✔️ 개요

커스텀 훅🪡

커스텀 훅은 간단히 말해서 리액트의 훅을 이용해서 사용자가 직접 만드는 함수예요.

useState, useEffect, useCallback 등의 리액트 hook으로 구성해서 원하는 기능을 만들고 원하는 값을 반환해서 컴포넌트에서 사용해요.

리액트 hook은 최상단 함수(함수 컴포넌트)외의 함수에서는 사용할 수 없지만 커스텀 훅에서는 사용할 수 있기 때문에 일반 함수보다 더욱 유연하고 유용하게 사용할 수 있어요.

그리고 두개 이상의 컴포넌트에서 여러번 사용되더라도 각각 호출한 컴포넌트 안에서 state와 effect가 실행된 것이기 때문에 독립적으로 동작해요.

왜 커스텀 훅을 만들까?🤔

커스텀 훅을 이용하면 여러 관심사로 이루어진 복잡한 로직을 분리할 수 있기 때문에 단순하고 읽기 좋은 컴포넌트를 만들 수 있어요.

재사용되는 로직이라면 당연히 유용하고, 외부 라이브러리를 사용할 때 훅으로 만들어 사용한다면 그 라이브러리가 업데이트 되더라도 메인 로직과 분리되어 있기 때문에 유지보수 하기에도 좋아요.

✔️ 개선 방향

ZELLO DRAW 서비스에서는 한 컴포넌트에 로직이 2개 이상 있는 곳이나 재사용되는 로직에 커스텀 훅을 적용해봤어요.

관심사 분리가 필요한 곳에 사용하기

QuizReplySection 컴포넌트에 적용한 부분을 예시로 가져왔어요.