$$config title: [ReactJS] useEffect - Deps keywords: - ReactJS - ... $$ # Deps (= dependency) : 배열 형태로 의존값이 들어있는 배열을 의미함. 의존값은 검사하고자 하는 특정 값이나 빈 배열(빈배열은 검사를 하지않는다는 것 = 한번만 실행) 즉, 쉽게 설명하면 deps는 react.js가 지켜보고 있는 값을 말함. 지켜보고 있다는 것은 해당 값이 바뀌는지를 보고 있다는 것을 의미함. => 지켜보고 있는 값인 deps가 바뀐다면 그에 대한 useEffect 함수를 실행함 ? [참고] deps는 배열의 형식으로 안에 " 여러개 " 를 넣을 수 있음. (한개만 넣고 싶다면 한개, 여러개라면 여러개를 지켜보고 검사한다는 뜻) # Deps 예제 ```js function App() { const [counter, setCounter] = useState(0); const [keyword, setKeyword] = useState(""); const onClick = () => setCounter((prev) => prev +1); const onChange = (event) => setKeyword(event.target.value); //컴포넌트가 생성되고 한번만 생성되는 useEffect useEffect(()=>{ console.log("i run only once."); },[]); //특정 값이 바뀔 때(update) 실행되는 useEffect //deps에는 특정 state가 변화할 때만 실행되기 위해 검사할 state변수를 넣어줌. //keyword만 바뀔 때 useEffect(()=>{ console.log("i run when 'keyword' changes."); }, [keyword]); //counter만 바뀔 때 useEffect(()=>{ console.log("i run when 'counter' changes."); }, [counter]); //keyword와 counter가 바뀔 때(둘중 하나만 바뀌어도 호출됨.) useEffect(()=>{ console.log("i run when 'keyword' & 'counter' changes."); }, [keyword, counter]); return (

{counter}

); } ```