[React] useEffect

 

※ useEffect

  - 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook

  - useEffect는 기본적으로 렌더링되고 난 직후마다 실행 되며,

      두 번째 파라미터 배열에 무엇을 넣는지에 따라 실행되는 조건이 달라짐

 

 

▶ useEffect의 기본형태

useEffect(function, deps

   - function : 실행하고자 하는 함수

   - deps : 배열 형태. function을 실행시킬 조건.

         = > deps에 특정값을 넣게 되면 컴포넌트가 mount 될 때, 지정한 값이 업데이트될 때 useEffect를 실행합니다

 참조 : https://cocoon1787.tistory.com/796

 

 

 

▶ useEffect 사용예시

import React, { useState, useEffect } from "react";
const Info = () => {
const [name, setName] = useState("");
const [nickname, setNickname] = useState("");
useEffect(() => {
console.log("렌더링이 완료됨");
console.log({
name,
nickname,
});
});

 

 

 

 

▶ useEffect imort

import React, { useEffect } from "react";

 

 

 

 

[1] 마운트될 때만 실행하고 싶을 때

        ㄴ useEffect 에서 설정한 함수를 컴포넌트가 화면에 맨 처음 렌더링될 때마 (업데이트될 때는 실행하지 않음)

 

  ▷ 함수의 두 번째 파라미터로 비어 있는 배열을 넣어주면 됨

 

useEffect(() => {
console.log("마운트될 때만 실행됨");
}, []);

  = > 컴포넌트가 처음 나타날 때만 콘솔에 문구가 나타나고, 그 이후에는 나타나지 않을 것임

 

 

 

[2] 특정 값이 업데이트될 때만 실행하고 싶을 때

 

  ▷ 클래스형 컴포넌트

componentDidUpdate(prevProps, prevState){
    if(prevProps.value!==this.props.value){
   	 doSomething();
	}
}

 

 

props 안에 들어 있는 value 값이 바뀔 때만 특정 작업을 수행함

  =>이러한 작업을 useEffect에서 해야 한다면?

        - useEffect 의 두 번째 파라미터로 전달되는 배열 안에 검사하고 싶은 값을 넣어주면 됨

useEffect(() => {
console.log(name);
}, [name]);

 

 

[3] 뒷정리하기

  -  컴포넌트가 언마운트되기 전이나 업데이트되기 직전에

     어떠한 작업을 수행하고 싶다면 useEffect 에서 뒷정리 함수(cleanup)를 반환해 주어야 함

useEffect(() => {
console.log("effect");
console.log(name);
return () => {
console.log("cleanup 함수);
console.log(name);
};
}, [name]);

Unmount 될 때만 cleanup 함수를 실행시키고 싶다면 deps에 빈 배열을,
특정 값이 업데이트되기 직전에 cleanup 함수를 실행시키고 싶다면 deps에 해당 값을 넣어주면 됩니다.