184일차(1) - 면접 정리 (Hook, useEffect unmount)

면접에서 깔끔하게 대답하지 못한 개념들 정리

Hook이란?

Hooks는 리액트 v16.8에 새로 도입된 기능으로, 함수형 컴포넌트에서도 상태를 관리할 수 있다.

함수형 프로그래밍은 상태(State)를 배제하여 부수효과(Side Effect)가 없게 동작한다. 그래서 상호작용을 대부분 상태변화로 모델링하는 프론트에서 커다란 단점이었다.

그래서 Hook은 class를 작성하지 않고도 state를 관리하기 위해 태어났다.

useEffect unmount

mount: 최초로 컴포넌트가 실행되는 것
unmount: 컴포넌트가 제거되는 것

주로 마운트 언마운트 하는 작업들은 다음과 같다.

mount

• props로 받은 값을 컴포넌트의 로컬 상태로 설정
• 외부 API 요청(REST API 등)
• 라이브러리 사용
• setInterval 을 통한 반복작업 혹은 setTimeout을 통한 작업 예약

unmount

• setInterval, setTimeout을 사용하여 등록한 작업들 clear 하기 (clearInterval, clearTimeout)
• 라이브러리 인스턴스 제거

정리(clean-up)를 이용하는 Effects

정리가 필요한 함수들이 있다. 이런 경우 메모리 누수가 발생하지 않도록 정리하는 것이 매우 중요하다.

정리가 필요할때는 함수를 return하면 리액트는 이것을 뒷정리할때 실행할 것이다.
리액트는 컴포넌트가 언마운트 할때 뒷정리한다.

리액트는 다음 렌더링의 effect가 실행되기 전에 이전 렌더링의 effect를 정리한다.

예시

useEffect(() => {
	const timer = setInterval(() => {
      // ...타이머 함수
    }, 1000);
  	// setInterval을 제거해야지 메모리 누수가 일어나지 않는다.
  	return () => clearInterval(timer);
}, [minute, second]);

참고자료

velopert - React Hooks
React - Hook의 개요
자라는 것을 잘하는 개발자 - useEffect()함수