React Hook 이해하기 - useEffect (Effect Hook)

 

useEffect가 하는 일

리액트에게 컴포넌트가 렌더링 된 이후에 어떤 일을 수행해야 하는지를 말한다.

리액트에게 넘긴 함수를 기억했다가 DOM 업데이트를 수행한 후 Effect를 불러온다.

 

 

useEffect를 컴포넌트 안에서 불러내는 이유

useEffect를 컴포넌트 내부에 둠으로써 effect를 통해

우리가 지정한 state 또는 props에 접근 할 수 있게 되고, 특별한 API 없이도

값을 가져올 수 있기 때문이다.

 

 

useEffect는 렌더링 이후 매번 수행되나?

useEffect는 렌더링 이후 매번 수행 된다. ( 첫번째 렌더링 ~ 이후 모든 업데이트에서 수행 됨 )

마운팅, 업데이트라는 방식으로 생각하는 것 보다 -> 렌더링 이후에 발생 하는 것

이라고 생각하는 것이 쉽다.

 

 

useEffect 최적화 방법

useEffect(()=> {
	document.title = `총 ${ count } 번 클릭했습니다.`;
}, [count]);

// dependency 인자에 count 변수를 넣어주어
// count가 바뀔 때만 effect를 재실행

[count]라는 두번째 인자를 넘긴다.

이것은 만약 count가 5이고 컴포넌트가 리렌더링 된 이후에도 변함없이 5라면

effect 수행을 건너뛰게 된다는 의미이다.

 

이런식으로 dependency 인자를 주어 useEffect를 최적화 할 수 있다.

 

 

 

 

 

2020/05/25 - [Front/React] - React Hook 이해하기 - useState (State Hook)

2020/05/22 - [Front/React] - 리덕스(Redux), 리덕스 미들웨어(Redux-Middleware) 이해하기

2020/05/22 - [Front/React] - Create-React-App으로 React 시작하기

 

 

 

 

 

출처

React 공식 문서