3/23 일일정리 Custom Hook

Custom Hook

Custom Hook이란 개발자가 직접 만든 hook을 말한다.

자주 사용하는 로직을 하나의 함수로 만들어서 Hook과 같이 사용하는 것이다.

Custom Hook을 만드는 이유는 반복되는 코드를 줄여서 가독성이 좋아지고, 코드의 재사용성을 높인다. 또한 로직에 문제가 발생했을 때 유지보수하기 좋다.

Custom Hook은 일반적으로 use- 로 시작하도록 이름을 지정한다.

 

Custom Hook 만들기 실습

페어와 함께 Custom Hook 만들기 실습을 진행하였다.

 

useFetch Hook

Fetch get요청을 해서 data를 받아오는 코드를 Custom Hook으로 작성해봤다. 

useFetch hook은 fetchUrl을 받아서 데이터를 가져온 후 다른 컴포넌트에서 꺼내어 사용한다.

Fetch 요청같은 경우는 자주 사용하기 때문에 이렇게 hook으로 만들어두면 재사용하기 편하다.

 

useInput Hook

input관련 함수나 상태도 마찬가지로 자주 사용하기 때문에 hook으로 만들어두면 재사용하기 좋다.

useInput Hook은 총 3개의 식별자가 담긴 배열을 반환한다.

value는 현재 상태를 나타내는 값이다.

bind는 객체로 2개의 프로퍼티를 가지는데, value는 바뀌기 전의 상태이고, onChange함수는 value를 e.target.value로 바꿔주는 메서드이다. 해당 객체는 input 컴포넌트의 props로 내려줄 예정이다.

reset 함수는 value를 초기상태로 돌려주는, 말그대로 리셋해주는 함수이다.

 

이렇게 만든 useInput hook은 다음과 같이 사용할 수 있다.

useState 사용하듯이 구조분해할당으로 각각의 식별자를 꺼내온다.

Input 컴포넌트에 bind 객체를 props로 내려준다.

받은 bind객체를 input 태그의 attribute로 넣어준다.

* attribute를 설정할 때 value={value} 이런식이 아니라 객체로 들어오기 때문에 {...value}로 spread 문법을 사용해서 지정해줘야 한다. 이러한 방법은 생소한데, 어떻게 동작하는지 알아봐야 할 것 같다.

아마도 ...value로 지정해주면 value : value, onClick : e => setValue(e.target.value) 이런식으로 적용되는 것 같다.

 

그리고 상위 컴포넌트에서 submit 버튼을 누르면

해당 값들을 저장하고, reset 함수를 사용하여 input창을 초기화 시켜준다.

 

useInput hook은 동작이 생소해서 몇번 해보면서 익혀야 할 것 같다.

 

 

Reference

- 코드스테이츠

- https://velog.io/@niboo/React-Custom-Hook-%EC%9D%B4%EB%9E%80