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/