[React] 리액트 Hooks - useEffect( ) 함수

 

1) useEffect( ) 함수란?

-  React component가 렌더링 될 때마다 특정 작업(Sied effect)을 실행할 수 있도록 하는 리액트 Hook

- 렌더링 혹은 변수의 값 혹은 오브젝트가 달라지게 되면 그것을 인지하고 업데이트를 해주는 함수

- 콜백 함수를 부르게 되며 렌더링 혹은 값, 오브젝트의 변경에 따라 어떠한 함수 혹은 여러 개의 함수들을 동작

- useEffect는 component가 mount 됐을 때, component가 unmount 됐을 때, component가 update 됐을 때

특정 작업을 처리

- 클래스형 컴포넌트에서 사용할 수 있었던 생명주기 메소드를 함수형 컴포넌트에서도 사용할 수 있게 된 것

 

 

반응형

 

 

 

2) useEffect( ) 사용법

 

※ 기본 형태 

useEffect( function, [deps] )

- function : 실행하고자 하는 함수

- deps : 배열 형태. function을 실행시킬 조건

deps에 특정값을 넣게 되면 컴포넌트가 mount 될 때, 지정한 값이 업데이트될 때 useEffect를 실행

 

 

※ 불러오기

import React, { useEffect } from 'react';

 

 

 

 

 

 

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

  useEffect(() => {
    console.log("맨 처음 렌더링될 때 한 번만 실행");
  },[]);

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

 

 

 

  useEffect(() => {
    console.log("렌더링 될때마다 실행");
  });

- 만약 deps부분 배열을 생략한다면 해당 컴포넌트가 (리)렌더링 될 때 마다 useEffect가 실행된다.

 

 

 

② Component가 Update 되었을 때(props, state 변경)

 useEffect(() => {
    console.log(name);
    console.log("name이라는 값이 업데이트 될 때만 실행");
  },[name]);

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

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

 

 

 const mounted = useRef(false);
  useEffect(() => {
    if (!mounted.current) {
      mounted.current = true;
    } else {
      console.log(name);
      console.log("업데이트 될 때마다 실행");
    }
  }, [name]);

- 업데이트뿐만 아니라 마운터 될 때도 실행되므로 업데이트될 때만 실행시키고 싶다면 위와 같은 방법을 사용한다.

 

 

const mounted = useRef(false);

useEffect(() => {
  if(!mounted.current){
    mounted.current = true;
  } else {
  //else 에서 배열 안에 있는 값이 바뀌면, 
  //ajax 서버 통신이라던지 원하는 코드를 실행
  }
},[바뀌는 값]);

- 컴포넌트가 마운트 될 때는 if 문에서 아무것도 실행하지 않고 mounted 값만 바꿔주고,

else 에서 배열 안에 있는 값이 바뀌면, ajax 서버 통신이라던지 원하는 코드를 실행할 수 있다.

 

 

 

③ Component가 Unmount 되었을 때(사라질 때) & Update 되기 직전에

  useEffect(() => {
    console.log("컴포넌트 나타남");
    console.log(name);
    return () => {
      console.log("cleanUp 함수");
    };
  });

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

 

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

: deps(두 번째 파라미터)에 빈 배열을 넣는다.

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

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

 

 

 

 

[출처] 

https://cocoon1787.tistory.com/796

https://xiubindev.tistory.com/100