Custom Hook

기존의 React Hook을 조합해 새로운 동작을 정의하는 함수

커스텀 훅 내부에서 기존의 React Hook을 호출 할 수 있으며 이를 통해 조합해 새로운 로직을 구성할 수 있다.

커스텀 훅은 함수형 컴포넌트 내에서 호출되어야 하며 재사용성을 고려해 작성해야 한다.

Custom Hook을 사용하는 이유

• 코드, 로직의 반복을 최소화하고 캡슐화를 통한 재사용성을 높이기 위함
• Custom Hook을 사용한 상태관리를 통해 컴포넌트의 코드를 간결하게 유지할 수 있음

Custom Hook 예시

아래 두개의 컴포넌트는 똑같은 로직을 사용하고 있다.
이런 경우 커스텀 훅을 사용할 수 있다.

src/components/TitleText.jsx

export default function TitleText(){
  const [value, setValue] = useState('')
  function onChange(e){
    setValue(e.target.value)
  }
  
  return(<>
   <input type="text" onChange={onChange}/> 
   <h1>제목 : {value}</h1>
  </>)
}

src/components/MainText.jsx

export default function MainText(){
  const [value, setValue] = useState('')
  function onChange(e){
    setValue(e.target.value)
  }
  
  return(<>
   <input type="text" onChange={onChange}/> 
   <p>본문 : {value}</p>
  </>)
}

보통 Custom Hook 작성 시에는 src 폴더 내에 hook 폴더를 생성해 Custom Hook을 분리한다. => 유지보수에 용이

src/Hook/useInput.jsx

function useInput(initState){
  const [value, setValue] = useState(initState)
  function onChange(e){
    setValue(e.target.value)
  }
  retrun [value, onChange]
}

분리된 Custom Hook을 사용해 위 2개 컴포넌트를 다시 작성할 수 있다.

src/components/TitleText.jsx

import useInput from '../Hook/useInput';

export default function TitleText(){
  const [value, onChange] = useInput("");
  
  return(<>
   <input type="text" onChange={onChange}/> 
   <h1>제목 : {value}</h1>
  </>)
}

src/components/MainText.jsx

import useInput from '../Hook/useInput';

export default function MainText(){
  const [value, onChange] = useInput("");
  
  return(<>
   <input type="text" onChange={onChange}/> 
   <p>본문 : {value}</p>
  </>)
}