[Node] React 정리(10) - useEffect를 사용하여 마운트/언마운트/업데이트

 

리액트로 프로젝트를 생성하여 개발하는 과정 중 리액트의 필수 문법 및 기초적인 부분, 심화 과정 등을 정리한 문서입니다. 정리한 부분에는 제가 이해하는 관점에서만 정리를 하였기 때문에 초점은 보여주는 형식이 아닌 제가 필요할 때 사용하려는 목적이 담겨져 있습니다. 

 

 클래스 컴포넌트의 경우에는 저번에 배웠던 리액트의 생명주기의 메소드를 호출하여 Mount 될 때의 과정들을 구현할 수 있었습니다. 하지만 함수 컴포넌트의 경우에는 다음과 같은 useEffect 함수를 호출하여 리액트 사이클을 구현할 수 있습니다.

 

 진부한 예제이지만 useEffect의 기초와 사용법 에 대해 배워보도록 합시다.

 

 

# Contents

---

• useEffect 기초와 사용법

 

 

# useEffect 기초와 사용법

---

 useEffect를 사용하기 위해서는 다음과 같은 구문을 사용해야 합니다.

 

import react, { useEffect } from "react";

 

용어

• 마운트 : 처음 나타남
• 언마운트 : 사라짐

 

useEffect 구조

• 첫번째 인자는 함수, 두번째 인자는 배열(주로 deps 라고 칭한다.)이 들어간다.

 

구문은 아래와 같습니다.

 

useEffect(() => {}, []);

 

cleanup 함수

• useEffect 안에서 return 할 때 실행 된다.
• useEffcet의 뒷정리를 한다. -> state에서 값 지울때 실행됨

 

구문은 아래와 같습니다.

 

useEffect(() => { 
	return() => {}
}, []);

 

deps

• deps 에 특정값을 넣게 되면, 컴퍼넌트가 마운트 될 때, 지정한 값이 업데이트 될 때 useEffect 실행 된다.
• deps에 값이 없다면 useEffect가 최신 값을 가리키지 않게 된다.
• deps에 값이 없다면 컴포넌트가 리렌더링 될 때마다 호출이 된다.
• deps에 값을 넣는것을 기본이라고 생각하는게 좋다.

 

deps에 빈 배열

• 처음 컴포넌트 마운트 됐을 때 useEffect내 함수 호출 (componentDidmount)
• 컴포넌트 언마운트 될 때 cleanup 함수 호출 (componentWillUnmount)

 

deps에 의존 값 존재

• 처음 컴포넌트 마운트 됐을 때 useEffect내 함수 호출 (componentDidmount)
• 의존 값이 업데이트 됐을 때 (componentDidUpdate)
• 컴포넌트 언마운트 될 때 cleanup 함수 호출 (componentWillUnmount)

 

아예 파라미터를 안 넣었을 경우

• 그냥 리렌더링 될 때마다 함수 호출

 

구문은 아래와 같습니다.

 

useEffect(() => { 
	return() => {}
}, [user]);

 

 

출처 : https://react.vlpt.us/basic/16-useEffect.html

16. useEffect를 사용하여 마운트/언마운트/업데이트시 할 작업 설정하기 · GitBook