[React] React Hook - useEffect

Hook은 React 16.8 버전부터 새로운 요소로 추가되었다.

기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있게 된것!

 

useEffect 훅이란?

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

useEffect를 사용하게 되면 함수형 컴포넌트에서 부가기능(side effect) 를 사용할 수 있게 된다.

 

이때의 특정 작업(side effect)란 렌더링 된 이후에 비동기로 처리되어야하는 부수적인 효과들을 의미한다.

 

useEffect 안에 적는 코드들은

- 복잡한 알고리즘 연산을 해야하는 경우

- 서버와 통신해 데이터를 가져오는 경우

- 타이머를 장착해야하는 경우 

- ... 

 

이제 함수형 컴포넌트에서도 생명 주기 메소드를 사용할 수 있게 되었다!

 

라이플 사이클훅 대체 가능!

- componentDidMount: 마운트, 화면에 처음 렌더링

- componentDidUpdate: 업데이트, 재랜더링

- compoenntWillUnMount: 마운트 해제, 화면에서 사라질 때

 

useEffect 사용하기

선언하기

import react, {useEffect} from "react";

useEffect(effect, [deps]);

- effec(함수) : 렌더링 이후 실행할 함수이다.

- deps(배열) : 특정 값이 변경될 때(해당 컴포넌트가 렌더링 될 때) effect 함수를 실행하고 싶은 경우 배열 안에 그 값을 넣어준다. 빈 배열이라면 컴포넌트가 Mount 될 떄만 실행된다. 

 

사용하기

1. Component가 Mount 되었을 때 - deps 존재

useEffect(()=>{
	// 화면이 처음 렌더링 될 때, 배열안의 값이 변경될 때 실행
},[value])

deps 배열을 지정했다면 화면이 처음 렌더링 될 때(Mount), 배열안의 값이 변경(Update / 재렌더링)될 때 실행된다.

 

 

2. Component가 Mount 되었을 때 - deps 생략

useEffect(()=> {
  // 렌더링 될 때 마다 실행
})

// 이거나

useEffect(()=> {
  // 화면이 처음 렌더링 될 때만 실행
}, [])

 deps 배열을 지정하지 않았다면 처음 화면이 렌더링 될 때를 포함한 모든 렌더링마다 실행이 된다.

 

deps 배열을 빈배열로 지정했다면 화면이 처음 렌더링 됐을 때만 실행된다. 

 

clean up 이란?

React 컴포넌트에는 두가지의 side effects 가 존재한다.

1. 정리(clean up)이 필요한 것

2. 정리(clean up)이 필요 없는 것

 

정리(clean up) 은 클래스형 컴포넌트에서 Unmounting 시 componentWillUnmount 를 사용해 더 이상 사용하지 않는 컴포넌트를 해제하는 것을 의미한다.

예를 들어 메모리를 많이 사용하는 컴포넌트에서 메모리 누수를 막기 위해 사용한다.

componentWillUnmount 메소드에서 메모리를 해제하는 설정을 해줘야한다.

useEffect(()=> {
  // 실행하는 코드
  
  return () => {
    // useEffect 동작 이전에 실행 - 기존 데이터 요청 제거 / unmount 시 실행
    clearTimeout(a)
  }
})

 

1번, 정리 해야하는 side effects는 React가 DOM 을 업데이트 한 후로 추가 코드를 실행할 필요가 없다면, clean up 을 해줘야한다.

그렇지 않다면 메모리 누수로 인한 시스템에 영향이 갈 수 있기 때문이다.

 

하지만 2번, 정리가 필요 없는 side effects 는

React 컴포넌트가 렌더링 되고 나서 추가 코드를 실행하는 경우엔 clean up 이 필요하지 않다.

 

해당 코드를 참고해보자!

- useEffect 사용 예제

https://github.com/mirro97/react-playground/blob/main/src/component/UseEffect.js

GitHub - mirro97/react-playground

 

- clean up 사용 예제

https://github.com/mirro97/react-playground/blob/main/src/component/UseEffectWithCleanUp.js

GitHub - mirro97/react-playground

 

useEffect 예제 코드를 직접 돌려보자!

https://mirro97.github.io/react-playground-result/

React App