19. Custom Hook

Custom hook?

useState, useEffect등 Hook을 사용하여 상태관리를 하고있습니다. 그런데 우리의 코드에는 반복되는 로직들을 많이 발견할 수 있죠. JS에서는 중복된 로직을 함수라는 개념으로 뽑아냈는데요. 리액트에서도 그렇게 하고싶은게 당연합니다. 이와 같이 중복되는 Hook을 우리 마음대로 만들어 분리하고 재사용하는 법을 알아보겠습니다.

Custom Hook 사용하기

아래와같은 컴포넌트 2개가 있다고 가정하겠습니다.


import React, { useState } from 'react';

function InputComponent() {
    const [value, setValue] = useState('')
    function onChange(e) {
        setValue(e.target.value)
    }
    return (
        <>
        <input type="text" onChange={onChange}/>
        <div>
        {value}
        </div>
        </>
    )
}

export default InputComponent

src/Components/InputComponent.jsx


import React, { useState } from 'react';

function SomethingComponent() {
    const [value, setValue] = useState('')
    function onChange(e) {
        setValue(e.target.value)
    }
    return (
        <>
        <input type="text" onChange={onChange}/>
        <div>
        {value}가 강해졌다 돌격해!
        </div>
        </>
    )
}

export default SomethingComponent

src/Components/SomethingComponent.jsx

입력창에서 입력한값을 통해 상태를 변경하도록 도와주는 onChange부분을 보겠습니다. SomethingComponent와 InputComponent에서 똑같은 로직을 사용하고있습니다. 하지만 각 상태는 컴포넌트별로 다르게 사용되고있기 때문에 공유하면 안되죠. 이런 경우에 사용할 수 있습니다.

Hook폴더를 만든 후 useInput.js파일을 만들어주세요 그리고 아래와 같이 작성해줍니다. 훅의 이름은 항상 “useName”형식으로 작성합니다. 아래 내용을 보시면 이전에 각 컴포넌트에서 중복 되어있는 로직과 동일한 부분이 그대로 작성되어있는것을 볼 수 있습니다. 그리고 리턴으로 value값과 상태를 조작해주는 onChange함수를 넘겨줄거에요.


import { useState } from 'react';

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

export default useInput

src/Hook/useInpu.jsx

작성하셨다면 컴포넌트로 돌아와서 아래와 같이 바꿔주겠습니다. 훨씬 깔끔해진 모습을 보실 수 있습니다.


import React from 'react';
import useInput from '../Hook/useInput'
function InputComponent() {
    const [value, onChange] = useInput("")
    return (
        <>
        <input type="text" onChange={onChange}/>
        <div>
        {value}
        </div>
        </>
    )
}
export default InputComponent

InputComponent.jsx


import React from 'react';
import useInput from '../Hook/useInput'
function SomethingComponent() {
    const [value, onChange] = useInput("")
    return (
        <>
        <input type="text" onChange={onChange}/>
        <div>
        {value}가 강해졌다 돌격해!
        </div>
        </>
    )
}
export default SomethingComponent

SomethingComponent.jsx

App.js에 모아서 볼수있는 예제


import React, { useState } from 'react';

function useInput() {
  const [value, setValue] = useState('')
  function onChange(e) {
      setValue(e.target.value)
  }
  return [value, onChange]
}
function InputComponent() {
  const [value, onChange] = useInput('')
  return (
      <>
      <input type="text" onChange={onChange}/>
      <div>
      {value}
      </div>
      </>
  )
}
function SomethingComponent() {
  const [value, onChange] = useInput('')
  return (
      <>
      <input type="text" onChange={onChange}/>
      <div>
      {value}가 강해졌다 돌격해!
      </div>
      </>
  )
}
function App(){
return(
  <>
    <InputComponent/>
    <SomethingComponent/>
  </>
)
}
export default App