React Hooks : useEffect()

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

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

특정 작업을 처리할 수 있다.

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

 

useEffect() 사용법

기본형태:

 useEffect( function, deps)

- function : 수행하고자 하는 작업

- deps : 배열 형태이며, 배열 안에는 검사하고자 하는 특정 값 or 배열

import React, { useEffect} from 'react'

useEffect 함수 불러오기

 

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

1. Component가 mount 됐을 때

 

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

 

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

- 만약 배열을 생략한다면 리렌더링 될 때 마다 실행된다.

 

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

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

 

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

 

-업데이트 될 때만 실행하는 것이 아니라 마운트 될 때도 실행한다.

 

const mount = useRef(false);

useEffect(() => {
	if(!mounted.current){
    	mounted.current = true;
     }else{
     //ajax
     }
   },[바뀌는값]);

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

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

 

3. Component 가 unmount 될 때 & update 되기 직전에

 

-cleanup 함수 반환

 

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

:두 번째 파라미터로 빈 배열을 넣어준다

 

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

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