useState에 이어서 useEffect를 정리해볼까 한다.
useState는 그 안에 있는 값이 변화할때마다 App.js안에 있는 다른 함수들도 자동으로 호출이 된다.
만약 여러번 호출되지 않기를 원하고 딱 한번만 호출 하길 원한다면 useEffect를 사용하면 된다.
코드를 살펴보자.
function App() {
const [counter, setValue] = useState(0);
const [keyword, setKeyword] = useState("");
const onClick = () => setValue((prev) => prev +1);
const onChange = (e) =>{setKeyword(e.target.value)};
console.log("i run all the time");
console.log("SEARCH FOR",keyword);
return (
<div>
<input onChange={onChange} type="text" placeholder="Search here..."/>
<h1>{counter}</h1>
<button onClick={onClick}>Click me</button>
</div>
);
}
위 코드에서 keyword 또는 counter를 변경하면 위에 있는 모든 함수가 다시 호출될 것이다.
keyword를 변경할 때 counter을 호출하고 싶지않고 counter를 변경할 때 keyword를 호출하고 싶지않다면 useEffect를 사용하면 된다!
function App() {
const [counter, setValue] = useState(0);
const [keyword, setKeyword] = useState("");
const onClick = () => setValue((prev) => prev +1);
const onChange = (e) =>{setKeyword(e.target.value)};
useEffect(()=>{
console.log("i run only once");
},[]);
useEffect(()=>{
console.log("i run when 'keyword' changes.");
},[keyword]); //keyword가 변화될때만 실행됨
useEffect(()=>{
console.log("i run when 'counter' changes.");
},[counter]); //counter가 변화될때만 실행됨
return (
<div>
<input onChange={onChange} type="text" placeholder="Search here..."/>
<h1>{counter}</h1>
<button onClick={onClick}>Click me</button>
</div>
);
}
다시 위 코드에서 useEffect를 살펴보면
useEffect내에서 첫번째는 실행시킬 함수를 작성하고 ,(콤마)뒤에는 의존키워드를 작성한다.
useEffect(function, deps)
deps는 'Array'형태로 한가지이상의 키워드를 작성할 수 있다. 여러 개를 입력한다면 그 중 하나가 변화될 때마다 함수가 호출된다.
위 코드의 경우 콘솔로 확인하기 위한 콘솔로그 함수를 입력했고
deps에는 useState의 value인 counter와 keyword를 입력했다.
deps에 입력된 값들이 변경 될 때마다 useEffect내에 함수들이 호출되는 것이다.
만약 deps를 아예 비워놓는다면 렌더링될 때마다 호출될 것이다.
deps에 빈 배열인 []만 적어 놓는다면 무조건 처음에 한번만! 호출될 것이다.
여기서 알아야 할 점은 useEffect에 어떤 dependency를 설정하더라도 처음에는 무조건 한번 호출 된다는 것이다. 그 후에는 deps에 작성된 키워드에 변화가 생길때만 호출이 된다.
코드를 언제 사용할지 선택해서 불필요하게 호출되는 현상을 막는 것이 useEffect이다. 유용하게 사용해보자!