리액트 커스텀 훅

리액트 함수형 컴포넌트로 사용자 정의 훅을 만들 수 있다.

보통 리액트에서 input값을 받을 때 state를 만들고 input이 onChange메서드가 실행될 때 state를 수정할 handle함수도 정의해야하는데 커스텀훅을 활용해서 이 handle함수와 상태값을 묶어준다면 코드가 깔끔해진다.

 

 

예시 1) 일반적인 Input에 value와 handle 함수를 엮음

 

//UseInput.js

import { useState } from "react"

const useInput = () => {
  const [value, setValue] = useState("")
  const handleInput = (e) => setValue(e.target.value)

  return [value, handleInput]
}

export default useInput


//App.js
import React from 'react'
import UseInput from '../hooks/UseInput'

function App() {
  const [value, handleInput] = UseInput()
  return (
    <div className="App">
      <input value={value} onChange={handleInput}></input>
    </div>
  );
}

export default App;

App.js에 핸들 함수를 안넣어서 좋다. UseInput은 재사용도 가능하다.

 

 

 

예시 2) 유효성 검사 추가

 

 //UseInput.js
 
 import { useState } from "react"

const useInput = () => {
  const [value, setValue] = useState("")
  const [valid, setValid] = useState(false)
  const handleInput = (e) => {
    const text = e.target.value
    setValue(text)
    if(text.length > 6) setValid(true)
    else setValid(false)
  }

  return [value, handleInput, valid]
}

export default useInput


//App.js
import React from 'react'
import UseInput from '../hooks/UseInput'

function App() {
  const [value, handleInput, valid] = UseInput()
  return (
    <div className="App">
      <input value={value} onChange={handleInput}></input>
      <p>{valid ? "유효한 텍스트입니다." : "6글자 이상 하셔야 합니다."}</p>
    </div>
  );
}

export default App;

 

 

결과물

- 

검색해보니깐 커스텀훅 내부에 useEffect()으로 setInterval넣어서 현재시각을 출력하기도 하고 jsx를 리턴하는 렌더함수를 훅에 넣어서 쓸 수도 있다.

nikgraf.github.io/react-hooks/

Collection of React Hooks

 

이 사이트에서 다양한 커스텀 훅스들을 찾아볼 수 있다.