Custom hooks

Custom hooks?

• 반복되는 로직을 재활용하기 위해 사용한다 
• Custom hook은 컴포넌트 내에서 훅을 사용하는 로직을 따로 분리하기 위해 사용한다
• Custom hook을 사용해서 만든 기능은 각 컴포넌트에서 독립된 상태를 가진다!

규칙

1. 함수 명이 use로 시작해야 한다.
2. 최상위에서만 호출할 수 있다.
3. 리액트 함수 내에서만 호출할 수 있다.
4. 꼭 return 값을 주자.

 

사용법

• 아래 코드를 보면 여러 개의 input에 ref를 부착해서 state의 값을 onChange 함수를 이용해 변경시켜서 span 태그 안의 내용을 변경키고 있다.

• 하지만 중복되는 useState, useRef 훅과 onChange 함수가 존재한다.
• 이 중복되는 로직들을 따로 분리해서 간결하고 재사용성이 높은 CustomHook 만들어보자.

App.js

import { useState, useRef } from "react";

const App = () => {
  const [text1, setText1] = useState("");
  const text1Ref = useRef()
  const changeText1 = () => {
    setText1(text1Ref.current.value)
  }
  const [text2, setText2] = useState("");
  const text2Ref = useRef()
  const changeText2 = () => {
    setText2(text2Ref.current.value)
  }
  const [text3, setText3] = useState("");
  const text3Ref = useRef()
  const changeText3 = () => {
    setText3(text3Ref.current.value)
  }
  return (
    <>
      <div>
        <input ref={text1Ref} onChange={changeText1}/>
        <span>{text1}</span>
      </div>
      <div>
        <input ref={text2Ref} onChange={changeText2}/>
        <span>{text2}</span>
      </div>
      <div>
        <input ref={text3Ref} onChange={changeText3}/>
        <span>{text3}</span>
      </div>
    </>
  )
}

export default App;

• 위 코드의 useState, useRef, onChange 함수를 useInput이라는 커스텀 훅에 넣어서 반복되는 로직을 담아주자!
• 그리고 return으로 커스텀 훅의 state값, onChange함수, ref를 차례로 리턴해주자.
• App.js에서는 차례로 useInput 커스텀 훅의 리턴 값을 받아오자!

useInput.js

import { useState, useRef } from "react";

export const useInput = (initialState) => {
    const [text, setText] = useState(initialState);
    const textRef = useRef();
    const changeText = () => {
        setText(textRef.current.value);
    };
    return [text, changeText, textRef];
}

App.js 

• text1, changeText1, text1Ref에 차례로 커스텀 훅의 state값, onChange 함수, ref 객체를 받아온다!

import {useInput} from "./useInput";

const App = () => {
  const [text1, changeText1, text1Ref] = useInput("");
  const [text2, changeText2, text2Ref] = useInput("");
  const [text3, changeText3, text3Ref] = useInput("");
  
  return (
    <>
      <div>
        <input ref={text1Ref} onChange={changeText1}/>
        <span>{text1}</span>
      </div>
      <div>
        <input ref={text2Ref} onChange={changeText2}/>
        <span>{text2}</span>
      </div>
      <div>
        <input ref={text3Ref} onChange={changeText3}/>
        <span>{text3}</span>
      </div>
    </>
  )
}

export default App;