커스텀 훅?
커스텀 훅은 리액트에서 재사용 가능한 상태 로직을 만들기 위해 사용하는 함수
리액트의 훅 기능을 활용하여 상태관리, 사이드 이펙트 처리 등 다양한 로직을 캡슐화하여
다른 컴포넌트에서 손쉽게 사용할 수 있게 해준다.
커스텀 훅의 기본 개념
-
함수의 형태: 커스텀 훅은 일반적으로 use로 시작하는 함수로 정의된다.
ex) useFtch, useForm 등 -
리턴 값: 커스텀 훅은 상태값, 함수, 또는 그 두가지를 포함하는 객체를 반환할 수 있다.
이를 통해 훅을 사용하는 컴포넌트는 필요한 값을 쉽게 사용할 수 있다.
커스텀 훅의 장점
- 코드 재사용: 공통된 로직을 커스텀 훅으로 분리하여 여러 컴포넌트에서 재사용할 수 있다.
- 가독성 향상: 로직을 분리함으로써 컴포넌트의 가독성을 높이고, 유지보수를 용이하게 한다.
- 상태 관리: 복잡한 상태 로직을 훅 내부에 캡슐화하여 컴포넌트의 상태 관리를 간소화할 수 있다.
커스텀 훅 주의사항
함수 이름은 use로 시작하는 것이 좋다.
자 그럼 커스텀 훅 실습을 시작해보자
원래는 아래와 같이 input마다 이벤트 핸들러를 작성하였고
input을 여러번 작성하였다.
이번엔 커스텀 훅을 이용하여 가독성을 향상시켜보자.
- useInput.jsx로 파일을 만들기
- useInput 커스텀 훅 함수 만들기
- 안에는 value,setValue, handler가 들어있다.
이 훅을 이용하여 사용할 부분에 import를 해주고
value와 handler을 커스텀 훅에 넘겨주어 작동하게 했다.
흠.. 커스텀 훅... 생각보다 간단한 것 같다!
코드 가독성을 위해 많이 사용하게 될 것 같은 느낌이다.
