7. useEffect

useState에 이어서

리액트 Hooks 중에서 가장 중요하다고 하는

useEffect에 대해서 알아보고 정리해보도록 하겠다.

 

 

 

⭐️ useEffect란??

 

useEffect Hook을 이용하여 우리가 React에게

컴포넌트가 렌더링 된 이후에 어떤일을 수행할지 정해줄수 있음.

또한, useEffect 훅을 사용하면 함수 컴포넌트에서도

side effect를 사용할 수 있음.

 

과거엔 클래스형 컴포넌트에서만 생명주기 메소드를 사용할 수 있었지만,

오늘날에는 이제 함수형 컴포넌트에서도 사용할 수 있음.

즉, (componentDidMount, componentDidUpdate, componentWillUnmount)라는

라이프사이클 훅을 대체할 수 있게 되었다.

 

 

 

useEffect는 기본적으로 몇개의 조건에 의해 작동.

• 페이지가 처음 렌더링되고 난후 useEffect는 무조건 한번 실행.
  
  
• useEffect에 배열로 지정한 useState 값이 변경될 때 실행.

---

 

그럼 본격적으로 useEffect 사용법에 알아보자!!

useEffect의 문법은 두가지형태만 알고있어도 충분하다.

 

첫번째는, 렌더링될때 마다 실행되는 문법이다.

 

useEffect(()=>{
	// 작업
});

 

 

두번째는, 화면에 첫 렌더링 될때 실행, value값이 바뀔때 실행되는 문법.

 

useEffect(()=>{
	// 작업
},[value]);

---

 

 

1. 렌더링이 완료 될 때마다 실행되는 예

 

그럼 먼저, 렌더링 될때마다 실행되는 예제를 살펴보자!

effect함수에서 함수를 리턴할 경우,

그 함수가 컴포넌트가 Unmount될 때 정리의 개념으로 한번 실행.

 

 

위의 그림처럼

렌더링이 되었을 때, count 스테이트가 변경될 때 마다

console.log가 찍히는 것을 볼 수 있다.

 

 

 

 

2. 최초 렌더링시에만 실행되는 예

 

빈 배열을 입력할 경우 컴포넌트가 Mount 될때만 실행.

 

예제를 보면

 

 

결과를 보게되면 1번과는 다르게 useEffect 함수가

처음 화면이 Mount될때만 한번 실행되고,

렌더링이 완료될때는 실행을 하지않는다.

 

 

 

 

3. 특정 값이 변경될 때만 실행되는 예

 

배열의 형태로, 특정한 값이 변경될 때

effect함수를 실행하고 싶을 경우 배열안에 그 값을 넣어줌.

 

예제를 봐보자!

 

 

위의 예제처럼 배열안에 count를 넣어줌으로써

name값이 변경될때는 useEffect함수인 console.log가

동작하지 않지만, count의 값이 변경될때에는

console.log가 찍히는 것을 볼 수 있다.

 

---

 

🚨 cleanup 함수

 

cleanup 함수는

 

• useEffect 안에서 return 할때 실행된다. (useEffect의 뒷정리를 함.)
  
  
• 만약 컴포넌트가 마운트 될 때 이벤트 리스너를 통해
  이벤트를 추가하였다면 컴포넌트가 언마운트 될 때
  이벤트를 삭제 해주어야한다.
  
  그렇지 않으면, 컴포넌트가 리렌더링 될 때마다
  새로운 이벤트 리스너가 핸들러에 바인딩 될 것임.
  이는 자주 리렌더링 될 경우 메모리 누수를 발생시킴.

 

 

예제를 봐보고 생각해보도록하자

 

 

 

위의 예제를 보면 클릭시 cleanup 함수에서 이전 count값,

그리고 렌더링 이후 변경된 count값이 찍히는 것을 볼 수 있음.

 

이는 useEffect 함수가 다시 실행될 때(실행되기 직전),

return 함수를 먼저 실행해주고 넘어가는 것이다.

 

 

 

오늘 알아본 useEffect 훅은 매우매우 중요하기 때문에 잘 알아보고
넘어가는 것으로하자!!!