React - useEffect

useEffect

리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook

클래스형 컴포넌트의 componentDidMount, componentDidUpdate를 합친 형태

마운트 될 때 한번만 실행하고 싶을 때

함수의 두 번째 파라미터로 비어있는 배열 삽입

useEffect(() => {
    console.log('마운트 될 때만 실행됩니다.');
  }, []);

특정 값이 업데이트 될 때마다 실행하고 싶을 때

함수의 두 번째 파라미터의 배열 안에 검사하고 싶은 값 삽입

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

컴포넌트가 언마운트되기 전이나, 업데이트 되기 직전에 어떠한 작업을 수행하고 싶을 때

return으로 수행할 작업 반환

useEffect(() => {
    console.log('effect');
    console.log(name);
    return () => {
      console.log('cleanup');
      console.log(name);
    };
  });

컴포넌트가 언마운트 될 때 한번 실행하고 싶을 때

두 번째 파라미터에 비어있는 배열 삽입

useEffect(() => {
    console.log('effect');
    console.log(name);
    return () => {
      console.log('cleanup');
      console.log(name);
    };
  }, []);