(React Hook)useEffect 는 무엇일까?

목적

• useEffect 가 무엇인가?
• useEffect 의 작동원리는 어떻게 되는가

useEffect란 무엇일까?

useEffect() 함수는 React component가 렌더링 될 때마다 특정 작업(Side Effect)을 실행 할 수 있도록 하는 리액트 Hook 입니다.

 

특정 작업(Side Effect)은 뭔가요?

component가 랜더링 된 이후에 비동기로 처리되어야 하는 부수적인 효과를 뜻합니다.

 

useEffect의 함수 불러오기

import React , { useEffect } from 'react' ;

 

useEffect의 사용 방법

useEffect ( funtion, deps)

 

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

함수에서 함수를 return 할 경우 그 함수의 컴포넌트가 Unmount 될 때 다시 한번 실행 을합니다.

 

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

deps 에 특정 값을 넣게 되면 컴포넌트가 mount 될 때 , 지정한 값이 업데이트 될 때 useEffect를 실행한다.

 

 

useEffect의 기본 형태

Component가 mount 됐을 때 ( 처음 나타났을 때 실행 )

useEffect(() => {
  ... // 실행할 내용들
});

 

useEffect의 기본 형태는 위와 같다. 위와 같이 사용하면 모든 경우에 해당 useEffect 함수가 실행된다.

 

useEffect의 Update

Component가 update 될 때 ( 특정 props, state가 바뀔 때 실행 )

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

 

특정 값이 업데이트 될 때 실행하고 싶다면, deps 위치의 배열 안에 검사하고 싶은 값을 넣어줍니다.

( 의존 값이 들어있는 배열 deps 라고도 합니다. dependency(의존)을 의미)

 

useEffect에는 [] 안에 값이 들어가거나 들어가지 않는 경우가 있다.

이를 dependency 라고 부르는데 dependency 파라미터 값에 의존하여 useEffect 함수가 실행될지 말지를 결정한다.