리액트 커스텀 훅 만들기

아 커스텀 훅... 가끔 들려왔지만 가볍게 듣고 흘려들었는데 지금은 너무 좋은 기능이라고 생각합니다.

 

반복적인 코드를 줄일 수 있는 방법!

 

사용방법

항상 use 가 이름 앞에 붙은 js 파일을 만들어주고, 파라미터로 넘겨받을 값을 설정합니다.

 

저는 + - 버튼을 커스텀 훅으로 만들어서 사용했습니다.

초기 값을 0으로 받고

useState를 활용해서 버튼 클릭마다 state 에 값을 담아두고 그 값을 return 으로 훅 밖으로 내보내줬습니다.

 

주의사항 : 항상 return 값을 줘야지 밑에 사진처럼 return 받아서 해당 컴포넌트에서 사용이 가능합니다.

 

커스텀 훅을 검색하면

input 값을 받아오는 커스텀훅이 튜토리얼처럼 글 들이 많지만 저도 이 글에는 없지만 input커스텀훅을 먼저 만들고

인용해서 버튼 커스텀 훅도 만들었습니다.

 

항상 반복되는 코드에 대해서는 걱정이 많았는데

앞으로 코드가 조금이나마 줄어들것같아서 기분이 좋습니다.