useEffect() 가 뭐꼬?

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

  useEffect(() => {
    console.log(name);
    console.log('업데이트 될 때 실행된다');
  }, [name]);

기본 형태 :

useEffect( function, deps )

 

- function : 수행하고자 하는 작업

- deps : 배열 형태이며, 배열 안에는 검사하고자 하는 특정 값 or 빈 배열

 

아래 코드를 통해, 함수 불러오기

import React, { useEffect } from 'react';

 

1. Component가 mount 됐을 때 (처음 나타났을 때)

 

- 컴포넌트가 화면에 가장 처음 렌더링 될 때 한 번만 실행하고 싶을 때는 deps 위치에 빈 배열을 넣는다.

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

***만약 배열을 생략한다면 리렌더링 될 때 마다 실행된다.

 

 

 

 

2. Component가 update 될 때 (특정 props, state가 바뀔 때) 

 

- 특정값이 업데이트 될 때 실행하고 싶을 때는 deps 위치의 배열 안에 검사하고 싶은 값을 넣어준다.

(의존값이 들어있는 배열 deps 이라고도 한다. dependency를 의미.)

 

- 업데이트 될 때만 실행하는 것이 아니라 마운트 될 때도 실행된다.

따라서 업데이트 될 때만 특정 함수를 실행하고 싶다면 아래와 같은 꼼수?를 사용하면 좋다.

  useEffect(() => {
    console.log(name);
    console.log('업데이트 될 때 실행된다');
  }, [name]);

 

 

3. Component가 unmount 될 때(사라질 때) & update 되기 직전에

 

- cleanup 함수 반환 (return 뒤에 나오는 함수이며 useEffect에 대한 뒷정리 함수라고 한다.)

 

 

- 언마운트 될 때만 cleanup 함수를 실행하고 싶을 때

: 두 번째 파라미터로 빈 배열을 넣는다.

 

- 특정값이 업데이트 되기 직전에 cleanup 함수를 실행하고 싶을 때

: deps 배열 안에 검사하고 싶은 값을 넣어준다.

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

 

 

참조 https://xiubindev.tistory.com/100