custom hook 만들기

keyword, result라는 state가 있는데 이 둘 state가 변경시 localStorage에 값을 저장하고 싶을 경우 어떻게 해야할까?

<script>
        useEffect(() => {
          window.localStorage.setItem("keyword");
          window.localStorage.setItem("result");
        }, [keyword, result]);
</script>

위의 코드의 문제는 - Keyword, result 둘중 하나가 변경되도 값이 저장되어 버린다. 각각이 변경되었을 경우에만 저장되도록 코드를 변경해보자.

<script>
        useEffect(() => {
          window.localStorage.setItem("keyword");
        }, [keyword]);
        
        useEffect(() => {
          window.localStorage.setItem("result");
        }, [result]);
</script>

이번에는 하는 역할은 똑같은 코드가 반복되어 사용되어 있는 것을 볼 수 있다.이럴 때 보통은 하나의 함수로 묶어서 사용하는데 리엑트는 react에서 만든 내장 함수임으로 일반 함수로 만들 수가 없다.

그래서 사용하는게 오늘 알아볼 custom hook이다.

<script type="text/babel">
      const rootElement = document.getElementById("root");

      const 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];
      };

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

        const [typing, setTyping] = useLocalStorage("typing", false);

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

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

        const handleChange = (e) => {
          setKeyword(e.target.value);
          setTyping(true);
        };

        const 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>
          </>
        );
      };
      ReactDOM.render(<App />, rootElement);
    </script>

핵심 코드

const 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];
      };

중복된 코드인 useState 생성, localStorage저장부를 하나로 묶었고,
boolean data같은 경우는 value값을 flag값으로 사용하여 해결하였다.

custom 함수 이해돕기 tip

        console.log(" test 1: ", null || "");
        // test 1 answer - ""
        console.log(" test 1: ", "text" || "");
        // test 2 answer - text
        console.log(" test 2: ", null || false);
        // test 3 answer - false
        console.log(" test 3: ", false || true);
        // test 4 answer - true

정리

• 반복 -> 함수로 묶는다.
• 훅들이 반복 -> custom Hook으로