[ React ] useEffect 정리

리액트 Hook 종류 중 하나인 useEffect에 대해 정리해본다.

 

useEffect는 component가 mount, unmount, update 됐을 때 특정 작업을 처리 할 수 있다.

 

componentDidMount

componentWillUnmount

componentDidUpdate 

 

형태

useEffect( function, deps )

 

[ import ]

- hook을 사용하기위해 임포트.

// import
import React, { useEffect } from 'react';

 

[ mount ]

- 마운트 됐을 때 실행

useEffect(() => {
    console.log('마운트!!');
}, []);

 

[ unmount ]

- 렌더링 될 때 마다 실행

- 컴포넌트가 렌더링 됐을 경우 딱 한번만 실행하고 싶을때는 deps위치에 빈 배열.

useEffect(() => {
    console.log('렌더링!!');
});

 

[ update ]

- 특정 props, state 가 바뀔때 실행 ( 아래 코드에서는 name이 바뀔때마다 실행된다. )

useEffect(() => {
    console.log(name);
    console.log('업데이트!!');
}, [name]);

 

[ cleanup ]