[React] custom Hook 만들기

useState, useEffect가 반복되는 경우
커스텀 훅을 만드는게 효율적이다.
커스텀 훅을 만들기 전에 필요성을 먼저 느껴보자🤔

간단한 검색창을 만들었고 input창에 입력하는 경우 밑에 보이게된다.
검색되는 키워드는 localStorage에 저장해두는 것이 목표이다

UI 및 함수

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

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

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

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

localStorage에 값을 저장할 때는 setItem함수를 사용한다

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

useEffect의 경우 두 번째 인자로 배열을 전달하는데,
배열에 키워드가 들어가있는 경우 그 키워드에 변화가 생길때마다 호출이 된다.

빈 배열인 경우 처음에 mount될 때만 호출이 되고
배열이 없는 경우는 매번 호출이 된다 ! 참고 !

문제는...🤔
result, typing, keyword 세 개의 값을 다 저장하고 싶다는 것인데

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

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

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

이렇게 쓴다면 비효율적이라고 할 수 있다

-> 커스텀 훅을 만들자 !

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

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

        return [state, setState];
      }

return값을 useState hook의 결과 값으로 전달해주면 된다.
두 번째 인자를 만들어준 이유는 string이 아닌 boolean 값을 전달해줘야 하는 typing 변수를 위해서이다.

value 값이 없으면 window.localStorage.getItem(itemName)을 넣어줄 것이고 값이 있다면 state 변수에 true나 false를 넣어주게 된다.

사용은 이렇게 하면된다

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

훅을 어떻게 재사용 할 수 있을까라는 생각을 했었는데 알아둔다면 앞으로도
유용하게 사용하지 않을까 싶다 !😎

강의 : 패스트캠퍼스 '한 번에 끝내는 React의 모든 것 초격차 패키지 Online'
https://fastcampus.co.kr/