22.12.27 - 커스텀훅

커스텀 훅

반복되는 로직이 자주 발생할 때 커스텀훅을 만들어서 반복되는 로직을 최소화하고,
쉽게 재사용하기 위해 제작

훅 쓰기 전

//App.jsx
import { useState } from "react"

const App = () => {
  const [text,setText] = useState("")
  
  const onChangeHandler = (e) => {
    setText(e.target.value)
  }
  
  return(
    <>
      <input type="text" onChange={(e) => onChangeHndler(e)} value={text} />
   	</>
  )
}

커스텀 훅 사용

// useInput.jsx
import { useState } from 'react';

const useInput = (initialValue) => {
  const [value, setValue] = useState(initialValue);
  
  const onChange = (e) => {
    setText(e.target.value)
  }
  
  return [value, onChange];
}

export default useInput;

// App.jsx
import useInput from "./hooks/useInput";

const App = () => {
  const [text, onChangeHandler] = useInput("");
  
  return(
    <>
      <input type="text" onChange={(e) => onChangeHandler(e)} value={text} />
   	</>
  )
}