Custom Hook
Custom Hook - 이름이 use 로 시작 하는 자바스크립트 함수 이다.
custom hook 을 사용하면 지금까지 컴포넌트 내부에 한 덩이로 결합하여 사용했던 State 와 Effect 를 분리하여 사용할 수 있다.
여러 퍼즐 조각을 끼워 맞춰 하나의 퍼즐을 완성 하듯이 React component 를 여러 Hook 을 조합하는 방식으로 개발할 수 있게된다. 로직을 독립적인 함수로 분리함으로써 하나의 로직을 여러 곳에서 반복적으로 재사용할 수 있게 된다.
React 16.8 업데이트로 Hooks 가 추가됐고, Hooks 를 통해 함수 컴포넌트에서도 state 와 effect, life cycle 등을 처리할 수 있게 된다. 함수 컴포넌트에 내장된 hook 을 사용하며 로직과 UI 를 분리해 관리할 수 있게 됐고, 여러기능들을 구현할 수 있었지만, 내장 hook 을 이용해 로직을 만들면 코드가 길어져서 가독성이 떨어지게 되는 경우도 있고, 만든 로직을 하나의 컴포넌트가 아닌 다른 컴포넌트에서도 사용해야 하는 경우가 발생 하기도 했다. 이러한 상황들을 해결하기 위해 Custom hook 이 등장 했다.
관심사의 분리
개발을 하면서 겪게 되는 다양한 고민 중 가장 빈번하게 겪는 고민 ( 기획의 변화, 디자인 변경, 요청 사항 추가 등의 이유로 기존 코드의 변화를 주어야 하는 경우) 을 관심사의 분리 를 통해 해결할 수 있다.
관심사의 분리란 ?
- 여러 고민과 걱정이 있을때, 한 번에 여러 걱정을 하게 되면 문제의 원인을 파악하기 쉽지않고, 쉽게 혼란에 빠지게 된다. 반대로 한번에 하나의 걱정만 하면 의외로 쉽게 문제를 해결할 수 있게 된다. 개발에서도 작성한 코드가 하나의 걱정만 하도록 단위를 잘게 나눠서 단위 별로 하나의 걱정 즉, 하나의 관심사만 갖도록 하고 그 관심사에 대해서만 충실히 동작하도록 만들어야 한다.
어떤 문제나 변화가 생겼을 때 전체 기능을 파악하기 위해 읽어야 하는 코드의 단위가 줄어들게 되고, 코드에 대한 파악이 빨라지므로 문제를 효과적으로 해결할 수 있게 된다. 또한 하나의 수정사항으로 인해 전체가 수정되는 것이 아니라, 해당 사항이 있는 일부분만 변경시키기 때문에 변화에 대해서도 내구성을 갖추게 된다.
각각의 관심사에 따라 코드를 분리하는 기법을 관심사의 분리(Soc, Separation of concenrs) 라고 부른다.
- 기능 별로 각각의 함수에서 하나의 기능만을 담당하고 필요시 그때그때 그 기능을 담당하는 함수만을 찾아서 수정 할 수 있다.
극단적으로 생각해서 짧은 코드가 아니라 몇천 몇만 줄의 코드가 있다고 가정했을때 수정이 필요한 기능의 코드를 찾기란 쉽지않다. 하지만 이렇게 관심사의 분리로 분리를 하게 된다면 수정 혹은 추가가 필요한 특정 함수만을 찾아 수정 하면 된다.
Custom Hook 사용
위의 코드는 UserStatus 라는 컴포넌트이고, 사용 상태 변경이라는 버튼을 누르면 현재 사용자의 상태가 사용 중 혹은 사용 안함이라는 UI 가 보이도록 변경되는 컴포넌트 이다.
UserStatus.js 파일 안에서 로직을 담당하는 코드와 UI 를 담당하는 코드로 분리했다.
- useToggle 함수에 매개변수로 initialValue 를 설정하고 기본값으로 false 를 할당 했다.
- useState 를 사용해 state 에 매개변수를 할당, false 가 기본값으로 설정된다.
- handleToggle 이라는 함수를 생성해 해당 함수가 호출되면 기존 state의 반대 값이 state 에 할당되도록 구현 한다. 이 함수가 실행되면 state는 true 로 변하게 된다.
- useToggle 함수에서 구현한 state 와 handleToggle 함수를 배열로 반환 한다.
결과적으로 useToggle 함수를 호출하면 [state, handleToiggle] 을 반환하게 된다.
UI를 담당하는 UserStatus 컴포넌트를 보면 로직과 UI 를 분리하기 전과 비교해보면 로직을 담당하던 부분의 코드가 한 줄로 정리된 것을 불 수 있다.
- 마치 useState 를 사용했던 것처럼, useToggle 이라는 함수를 호출해서 isActive 와 changeStatus 에 usetoggle 의 반환 값을 각각 할당 한다. 즉, isActive 에는 state 가 할당되고, changeStatus 에는 handleToggle이 할당 된다.
- 할당된 값을 이용해서 UI를 구현하게 된다.
이렇게 useToggle 이라는 커스텀 훅을 만들어 로직과 UI 를 분리해 관리할 수 있다. 로직과 UI 를 분리해서 관리하는 방법은 알았지만, 로직과 UI 의 코드가 길어진다면 코드의 가독성 측면에서 한 파일에 두 가지 모두를 관리하는 것이 비효율적이다.
이럴땐 👇 아래 코드 처럼 파일을 분리해서 사용해 주면 된다.
로직을 담당하는 부분을 따로 파일로 분리하고 export 를 통해 어느 컴포넌트에서든 사용할 수 있도록 해준다.
useToggle 을 사용하고 싶다면, 마치 useState 를 사용했을 때처럼 import 를 통해 useToggle 을 불러온 뒤, 해당 로직을 사용하면 된다.
로직과 UI 를 분리하게 되면 수정사항이 발생했을 때, 코드의 변경이 필요한 부분이 로직인지 UI 인지를 판단해 해당하는 부분이 있는 파일을 찾아가 변경 해주면 된다.
[ 모든 경우에 대해 무조건 이런 식의 분리가 권장되는 것은 아니다. 섣부른 추상화는 오히려 코드를 여기저기로 분리해 변경을 힘들게 만든다. 추상화가 필요한 경우와 그렇지 않은 경우를 잘 판단하여 코드를 분리해야 한다.]
정리
- 함수 컴포넌트에 내장된 훅을 사용해 로직과 UI 를 분리해 관리할 수 있었지만, 내장 훅을 이용해 로직을 만들면 코드가 길어져 가독성이 떨어지고, 만든 로직을 다른 컴포넌트에서 재상용할 수 없었기에 Custom Hook 이 등장하게 되었다.
- 커스텀 훅은 state 와 effect를 분리해 사용할 수 있고, 하나의 로직을 여러 곳에서 반복해 사용할 수 있게 한다.
