useEffect

useEffect를 사용하면 컴포넌트가 화면에 나타날 때 & 사라질 때,

props가 업데이트 될 때 & 업데이트 되기 전에 할 행위들을 정해줄 수 있다.

useEffect를 사용하기 위해서 코드 맨 윗줄에 import React, { useEffect } from 'react';를 추가해야 한다.

 

useEffect의 첫번째 파라미터에는 화면에 나타날 때 실행할 함수를 넣어주고,

그 함수의 리턴 값으로는 화면에 사라질 때 실행될 함수를 넣어준다(생략가능). 두번째 파라미터는 []로 비워준다.

아래와 같이 작성하면 User 컴포넌트가 화면에서 사라질 때마다 '컴포넌트가 화면에 나타남'이 콘솔에 출력되고,

컴포넌트가 화면에서 사라질 때마다 '컴포넌트가 화면에서 사라짐'이 콘솔에 출력된다.

 

function User (props) {

  const { name, email } = props;

  useEffect( () => {

    console.log("컴포넌트가 화면에 나타남");

    return () => {

      console.log("컴포넌트가 화면에서 사라짐");

    }

  }, []);

  return (

    <div>

      <b>{name}</b> ({email})

    </div>

  )

}

 

컴포넌트가 화면에서 나타나고 사라질 때 실행되는 것이 아니라

props가 업데이트될 때와 업데이트 되기 전에 할 행위들을 지정하고 싶으면

useEffect의 첫번째 파라미터로 props가 업데이트 되고 나서 할 함수를 작성하고,

그 함수의 리턴 값으로는 props가 업데이트 되기 전에 할 함수를 작성한다.

그리고 두번째 파라미터로 그 props의 이름을 넣어준다.

 

아래와 같이 작성하면 User 컴포넌트가 처음 화면에 나타날 때 'name 값이 설정됨'이 출력된다. 그리고

User의 props인 name이 변경될 때마다 먼저 'name 값이 설정되기 전에 할 일'이 출력되고,

'name 값이 설정됨'이 출력된다.

 

function User (props) {

  const { name, email } = props;

  useEffect( () => {

    console.log("name 값이 설정됨");

    return () => {

      console.log("name 값이 설정되기 전 할 일");

    }

  }, [name]);  // <- 이 props가 업데이트될 때마다 useEffect가 발동된다

  return (

    <div>

      <b>{name}</b> ({email})

    </div>

  )

}