React custom hook 만드는 방법

2023-04-06

안녕하세요.

지난 시간에는 React useEffect를 사용하는 방법에 대해서 알아봤습니다.

이번 시간에는 React custom hook을 만드는 방법에 대해서 알아보겠습니다.

다음 코드는 지난 시간에 진행했던 useEffect 예제 코드입니다.

<!DOCTYPE html>
<html lang="en">
<body>
  <div id="root"></div>
  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script type="text/babel">
    const rootElement = document.getElementById("root");

    const App = () => {
      const [keyword, setKeyword] = React.useState(() => window.localStorage.getItem("keyword") || "")
      const [result, setResult] = React.useState("")
      const [typing, setTyping] = React.useState(false)

      React.useEffect(() => {
          window.localStorage.setItem("keyword", keyword)
      }, [keyword, typing])

      function handleChange(event) {
        setKeyword(event.target.value)
        setTyping(true)
      }

      function handleClick() {
        setTyping(false)
        setResult(`We find results of ${keyword}`)
      }

      return (
        <>
          <input onChange={handleChange} value={keyword} />
          <button onClick={handleClick}>search</button>
          <p>{typing ? `Looking for ${keyword}...` : result}</p>
        </>
      )
    }

    ReactDOM.render(<App />, rootElement);

  </script>

</body>
</html>

이 예제 코드에서는 keyword의 변수값을 localStorage에 저장하고 있습니다.

이번에는 keyword 뿐만 아니라, result 변수와 typing 변수도 localStorage에 저장하기 위해 custom hook을 만들어서 사용해보겠습니다.

result와 typing 변수를 localStorage에 저장하기 위해서는 useEffect를 사용해야 합니다.

<!DOCTYPE html>
<html lang="en">
<body>
  <div id="root"></div>
  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script type="text/babel">
    const rootElement = document.getElementById("root");

    const App = () => {
      const [keyword, setKeyword] = React.useState(() => window.localStorage.getItem("keyword") || "")
      const [result, setResult] = React.useState("")
      const [typing, setTyping] = React.useState(false)

      React.useEffect(() => {
          window.localStorage.setItem("keyword", keyword)
      }, [keyword])

      React.useEffect(() => {
          window.localStorage.setItem("result", result)
      }, [result])

      React.useEffect(() => {
          window.localStorage.setItem("typing", typing)
      }, [typing])

      function handleChange(event) {
        setKeyword(event.target.value)
        setTyping(true)
      }

      function handleClick() {
        setTyping(false)
        setResult(`We find results of ${keyword}`)
      }

      return (
        <>
          <input onChange={handleChange} value={keyword} />
          <button onClick={handleClick}>search</button>
          <p>{typing ? `Looking for ${keyword}...` : result}</p>
        </>
      )
    }

    ReactDOM.render(<App />, rootElement);

  </script>

</body>
</html>

그런데 useEffect를 사용하면 코드가 길어지고, useEffect를 사용하는 부분이 여러 곳에 있으면 코드를 관리하기가 어려워집니다.

그래서 이런 경우에는 custom hook을 만들어서 사용하는 것이 좋습니다.

custom hook으로 useLocalStorage 함수를 만들어 사용해 보겠습니다.

<!DOCTYPE html>
<html lang="en">
<body>
  <div id="root"></div>
  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script type="text/babel">
    const rootElement = document.getElementById("root");

    function useLocalStorage(itemName, defaultValue = "") {
      const [state, setState] = React.useState(() => window.localStorage.getItem(itemName) || value)

      React.useEffect(() => {
        window.localStorage.setItem(itemName, state)
      }, [state])

      return [state, setState]
    }

    const App = () => {
      const [keyword, setKeyword] = useLocalStorage("keyword")
      const [result, setResult] = useLocalStorage("result")
      const [typing, setTyping] = useLocalStorage("typing", false)

      function handleChange(event) {
        setKeyword(event.target.value)
        setTyping(true)
      }

      function handleClick() {
        setTyping(false)
        setResult(`We find results of ${keyword}`)
      }

      return (
        <>
          <input onChange={handleChange} value={keyword} />
          <button onClick={handleClick}>search</button>
          <p>{typing ? `Looking for ${keyword}...` : result}</p>
        </>
      )
    }

    ReactDOM.render(<App />, rootElement);

  </script>

</body>
</html>

이렇게 하면 keyword, result, typing 변수를 localStorage에 저장하는 코드를 한 곳에 모아서 관리할 수 있습니다.

이렇게 React custom hook을 만들어서 사용하는 방법에 대해서 알아봤습니다.

감사합니다.

< 목록으로 돌아가기