[React] 커스텀 훅 만들기 :: use{Name}

 

🎯 use{Name}

• 커스텀 훅 이름 컨벤션은 카멜 케이스로 표기

 

📝 반복되는 Hook을 Custom Hook으로 만들기

const rootElement = document.getElementById('root');

function useLocalStorage(itemName, value = "") {
    const [state, setState] = React.useState(() => {
        return window.localStorage.getItem(itemName) || value; // 로컬스토리지에 값이 없으면 value를 반환. keyword, result는 ""로 초기값이 저장되고 typing은 false를 넘겨줘서 false가 저장된다.
    });

    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);

• keyword, result, typing을 로컬 스토리지에 저장하는 커스텀 훅이다.
• 3개의 변수에 대해서 공통된 useState과 useEffect를 하나의 훅으로 동작시킬 수 있다.

 

[React] 컴포넌트 사이드 이펙트 다루기 :: useEffect

• 이전에 작성한 코드에서는 keyword만 useState과 useEffect 적용했지만 커스텀 훅을 통해서 3개 변수에 대해서 공통된 작업을 수행할 수 있다.