본문 바로가기

React.js

UseEffect()에 대해서

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

기본적으로는 

이런식으로 실행이 된다.

 

1. 컴포넌트가 마운트될때 (처음 사용될때? 처음 렌더링될때)

페이지가 렌더링 될때마다 컴포넌트를 한번만 실행 하고싶다면 deps위치에 빈 배열을 입력하면 된다.

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


 

2.컴포넌트가 업데이트될때 #특정 props나 state값이 바뀔때

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

업데이트될때 뿐만아니라 마운트가 될때마다 실행된다.

따라서 업데이트될때만 특정 함수를 실행하고싶다면 

이런 식으로 조건문을 주어서 특정값만 실행을 시킬수도있다.


3.컴포넌트가 언마운트될때 (사라질때) 또는 업데이트 되기 직전에 

언마운트 될때만 cleanUp함수를 실행하고싶다면 두번째 파라미터에 빈 배열을 넣게 되면 가능하다.

 

특정값이 업데이트 되기전에 클린업함수를 실행하고싶으면  deps배열안에 검사하고싶은 값을 넣어준다.

 

반응형