[리액트 React] useEffect()

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

출처:  http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

 

useEffect() 사용법

1. 기본형태

useEffect(function, deps)

• function : 수행하고자 하는 작업
• deps: 배열 형태이며, 배열 안에는 검사하고자 하는 특정 값 or 빈 배열

2. useEffect 함수 불러오기

import React, { useEffect } from 'react';

 

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

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

마운트 될때 만 (처음에) 실행됨

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

배열을 생략하면 리 렌더링 될때마다 실행된다.

 

 

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

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