간단한 리액트 커스텀 훅 만들어보기. (React custom hook)

서론

React 16.8부터 추가된 Hook 은 리액트 함수형 프로그래밍의 근간이 된다.

다만 Hook은 리액트 어디서나 사용 가능한 것은 아니고 몇 가지 제약사항이 있다.

 

• 리액트 함수형 컴포넌트 내부 혹은 커스텀 훅 내부에서만 사용 가능하다.
• 함수형 컴포넌트 내부에서도 최상위에서 선언이 가능하다. (반복문, 조건문에서 선언 X)

오늘은 이 Custom Hook, 커스텀 훅 에 대해서 다루어보자.

 

---

커스텀 훅이란?

컴포넌트 내부에서 훅을 사용해 로직을 구현하다 보면 중복되는 부분이 발생하기 마련이다.

우리는 중복되는 훅들을 결합하고 추상화하여 사용하고자 하는 니즈가 생길 것이다. 

 

이와 관련해 리액트 공식문서에서는 커스텀 훅에 대해 다음과 같이 말하고 있다.

Hook을 추상화된 로직으로 사용할 수 있도록 결합해주고 다른 컴포넌트 사이에서 공통의 상태 관련 로직을 재사용할 수 있도록 해줍니다.

 

 

컴포넌트에서 사용되는 훅 관련된 로직을 함수로 추상화, 분리하여 재사용 할 수 있게 해 준다는 것이다.

 

---

커스텀 훅 Example

회원가입 폼을 구현하다보면 이름, 비밀번호, 이메일 등 여러 개의 input을 state로 관리해주어야 한다.

뿐만 아니라 이 input들에 대한 onChange 핸들러를 모두 작성해주어야 한다.

 

컴포넌트 내부에 비슷한 역할을 하는 중복된 코드가 즐비하게 된다.

이제 이 중복되는 로직을 useInput 이라는 커스텀 훅을 통해 분리해보겠다. 

 

---

 

다음은 일반적으로 useState와 핸들러를 정의해서 input을 컨트롤하는 코드이다.

한눈에 보아도 비슷한 형태의 hook 로직이 많이 보인다.

이제 이 공통된 부분을 추출하여 useInput이라는 커스텀 훅을 만들어보겠다.

 

---

 

가장 간단한 형태의 useInput 커스텀 훅을 구현했다.

말 그대로 "커스텀" 훅이다.

본인의 입맛대로 더 추가할 수 있다.

 

나는 input 태그에 value, onChange 핸들러까지 부착된 상태의 jsx를 반환하겠다

 

그럼 그렇게 하면 된다.

 

이제는 이 useInput으로 위의 코드를 수정해보자.

 

 

---

 

자!  훨씬 간결해졌다.

useInput 의 반환 값이 `{ value, onChange }` 이기 때문에 props-spreading 을 통해 손쉽게 input에게 props를 넘겨줄 수 있다.

이렇게 props-spreading을 사용해 props를 전달하는 것은 다음의 이유로 인해 권장되는 방식은 아니다.

1. 어떤 props가 전달되는지 명확하지 않다. 가독성을 해친다.
2. 의도치 않은 props가 전달될 수 있다.

커스텀 훅을 사용하면 이렇게 간결해질 수 있다 라는 것을 강조하기 위해 사용했으니 반드시 이렇게 구현하라는 것은 아님을 기억하자.