react의 useEffect는 딱 한번만 실행되며 dependency에서 변화되는 것을 지켜봄!!

useState는 상태가 바뀔 때마다 매번 실행되지만,

api 호출 같은 상황에서는

코드가 처음 한번만 실행되고 다시는 실행되지 않기를 바랄 수 있음.

이 때 useEffect를 사용함. 

 

useEffect(()=> {

console.log("Call the API...")}, [])

 

이것이 없으면 항상 refresh state를 함!

 

또한 useEffect는 

useEffect(() => {

  실행되는 코드}, [dependency]) 로 구성됨

dependency는 실행되는 조건을 의미하며 변화되는 것을 '지켜보는 것'을 의미함.

 

useEffect(() => {

  console.log("I run only once.")}, [])

useEffect(() => {

  console.log("I run when 'keyword' changes.")}, [keyword])

useEffect(() => {

  console.log("I run when 'counter' changes.")}, [counter])