[React] useEffect

useEffect

useEffect는 컴포넌트가 랜더링 될 때 마다 원하는 동작을 수행하는 명령이다.

useEffect( 함수, 배열 );

함수 : 원하는 동작

배열 : 검사하고자 하는 특정 값, 배열

 

배열의 내용

빈 배열일 경우 - 마운트 될 때만 앞의 함수를 수행한다.

import React, { useEffect } from 'react';
 
useEffect(() => { console.log("mount!")}, []);

마운트 될 때 마다 console에 "mount!"라고 알려준다.

 

배열의 값을 집어넣는 경우

보통 props나 state의 변화를 감지하기 위해 배열안에 집어넣는다.

(state를 배열에 넣으면 state값이 변경되어 다시 렌더링 할 때마다 앞의 함수가 실행된다.)

import React, { useEffect, useState } from 'react';
 
const [count, setCount] = useState(0);
 
useEffect(() => { console.log("count: " count)}, [count]);

count가 변경될 때 마다 console에 count의 값을 알려준다.

 

언마운트 될때의 특정 동작을 하고싶다면?

함수 안에 return 을 통해 수행하고 싶은 동작을 넣는다.

import React, { useEffect } from 'react';
 
const [count, setCount] = useState(0);
 
useEffect(() => { 
    console.log("mount!");
    
    return () => {
        console.log("unmount!");
        console.log("count: " count);
    }
}, []);

mount될 때 : console에 "mount!"라고 알림

unmount될 때 : console에 "unmount!"라고 알리고, count를 알려줌

 

 

참고한 사이트

https://ko.reactjs.org/docs/hooks-effect.html

Using the Effect Hook – React

https://xiubindev.tistory.com/100

React Hooks : useEffect() 함수