[Today I Learned] 12월 1주차 day5

useEffect

react 컴포넌트가 랜더링이 될때마다 특정작업을 수행할 수 있게 하는 hook이다.

의존성 배열 (디펜던시)

이배열에 값을 넣으면 그 값이 바뀔때마다 실행해준다.

useEffect(() => {
    console.log("hello useEffect");
  }, []);                 //비어있는 의존성 배열 , 처음에 딱 한번만 실행이 됨

------------------------------------------

useEffect(() => {
    console.log("hello useEffect");
  }, [value]);               //value를 넣음 , 해당값이 변할때마다 계속 실행이 됨

clean-up 함수

useEffect 에서는 함수를 반환 할 수 있는데 이를 cleanup 함수 라고 부름.
cleanup 함수는 디펜던시가 빈배열이면, unmount 될때 return문이 실행 되고
디펜던시 에 값이 있으면, 디펜던시가 바뀌기 직전에 먼저 실행이 된다.

useEffect(() => {
    console.log('컴포넌트가 화면에 나타남');
    return () => {
      console.log('컴포넌트가 언마운트되면 화면에서 사라짐');
    };
  }, []);

[공부 할 자료]

리액트 공식문서