함수에서 사용하는 생명주기 useEffect()

이거는 들어온 값이 바뀔 때 마다 호출됨.

 

이거는 값이 바뀌면 감지하고 그걸 return해 준다.

 

useEffect는 배열로 반환을 하는데,

 

useEffect에 들어가 있는 배열을 의존성 배열이라고 한다.

 

 

useEffect 구조

useEffect(()=>{}, [])

이렇게

useEffect(콜백, 배열);

 

저 배열안에 무언가 있냐 없냐에 따라 create로 동작하냐, update로 동작하냐.

 

콜백은 create나 update 하는 순간 실행하고 싶은 내용들.

 

저 배열은 반환하고 싶은 값들 넣으면 됨.

 

update 되었을 때 

 

 

 

보통 저기에 fetch 등해서 나오는 값을 받아 놓음.

그러면 딱 불러왔을 때 값이 바뀌면서 그걸 감지해서 콜백을 실행함.

 

 

  const [count, setCount] = useState(0);
  const handlerCount = (value)=>{
    setCount(count+value);
  }

  useEffect(()=>{
    console.log("count update : ", count);
  }, [count]);

 

저 const 바뀌면 감지해서 useEffect() 안에 있는 콜백 실행함.

 

  useEffect(()=>{
    console.log("create");
  }, [])

이게 create 되었을 때 한번만 실행하는 거.

 

 

참고로 아예 배열 자체를 안넣고 콜백만 넣으면 

 

 

빈배열 : mount, unmount 경우만 

배열에 있는 경우 : 배열 안에 있는 값 들을 감시

배열이 아예 없는 경우 : 업데이트 시 마다 호출

 

마운트, 언마운트는

대충 이 타이밍임.

 

언마운트가 제거할 때 저거같고,

마운트가 저거 render 이후에 저거 같은 듯. DidMount

 

이건 클래스 얘기긴 한데 타이밍인 맞을 듯.

 

 

useEffect(()=>{

}, [])

맨 처음 한번만 create 시점 콜백을 실행

 

useEffect(()=>{

})

create, update 시점에 늘 콜백을 실행

 

useEffect(()=>{

}, [a,b,c])

a, b, c의 값이 바뀌었을 때 콜백을 실행