Custom Hooks

Custom Hooks

 커스텀 훅은 react에서 제공하는 훅이 아닌 개발자가 직접 만들어서 사용하는 훅을 말한다. 이를 사용했을 때 input과 fetch와 같이 반복적으로 사용되는 메서드를 하나로 묶어서 사용할 수 있게 해주며, 이에 따라 코드 재사용성을 높여준다.

 

useInput 만들기

 input 태그를 생성하고 활용하려면 보통 input을 관리하는 state와 값의 변경을 다루는 Onchange 함수, 그리고 input에 입력된 값을 바탕으로 특정 동작을 수행하는 Onclick 함수를 생성해야 한다. 만약 Input을 여러개 사용해야 할 경우 코드가 매우 길어질 수 있으며, 동일한 코드를 사용하는 것이기 때문에 custom 훅을 만들어서 사용하면 재사용성을 높이고 가독성을 높일 수 있다.

 

 useInput을 만드는 방법은 간단하다. 기존에 input을 사용하기 위한 코드를 useInput이라는 새로운 함수로 정의하면 된다. 아래 코드에서 initialValue는 state의 초기값을 의미하며, submitAction은 Submit이 발생했을 때 동작할 함수를 의미한다.

 

// useInput.js

export function useInput(initialValue, submitAction) {
   const [inputValue, setInputValue] = useState(initialValue)
   
   const handleChange = (e) => {
      setInputValue(e.target.value)
   }
   
   const handleSubmit = () => {
      setInputValue('')
      submitAction(inputValue)
   }
   
   return [inputValue, handleChange, handleSubmit]
}

 

 

 사용방법은 useInput을 사용할 컴포넌트에서 import 해서 사용하면 된다. 먼저 useInput은 두개의 인자(initialValue, submitAction)를 받기 때문에 useInput()에 해당하는 값을 넣어주면 되고, useInput의 return 값은 [inputValue, handleChange, handleSubmit] 이기 때문에 그대로 가져와서 사용을 하면 된다.

 

 이러한 방법을 사용하면 10줄 가까이 되는 코드를 단 한줄로 줄여서 사용할 수 있기 때문에 재사용성과 가독성을 높여준다.

// App.js

function displayMessage(message) {
   alert(message)
}

function App() {
   const [inputValue, handleChange, handleSubmit] = useInput('', displayMessage)
   
   return (
      <div>
         <h1> useInput </h1>
         <input value={inputValue} onChange={handleChange} /> 
         <button onClick={handleSubmit}> 확인 </button>
      </div>
   )
}

export default App

 

 

 

useFetch 만들기

useFetch의 사용법은 useInput과 유사하기 때문에 사용을 원한다면 코드를 잘 따라하면 될 것 같다.

// useFetch.js

export function useFetch(baseUrl, initialType) {
   const [data, setData] = useState(null)
   
   const fetchUrl = (type) => {
      fetch(baseUrl + '/' + type)
      .then((res) => res.json())
      .then((res) => setData(res))
   }   
   
   useEffect(() => {
      fetchUrl(initialType)
   }, [])
   
   return {data, fetchUrl}
}

 

 

// App.js

const baseUrl = '데이터를 불러오고자 하는 URL'

function App() => {
   const {data, fetchUrl} = useFetch(baseUrl, 'users')
   
   return (
      <div>
         <button onClick={() => fetchUrl('users')}> USERS </button>
         <button onClick={() => fetchUrl('posts')}> POSTS </button>
         <button onClick={() => fetchUrl('todos')}> TODOS </button>
         <pre> {JSON.stringify(data, null, 2)}</pre>
      </div>
   )
}

export default App

 

 

 

 

 

 

Reference
https://legacy.reactjs.org/docs/hooks-custom.html
https://velog.io/@niboo/React-Custom-Hook-%EC%9D%B4%EB%9E%80
https://www.youtube.com/watch?v=S6POUU2-tr8