[React] 7. React hooks[2] - useEffect란?

7. React hooks[2] - useEffect란?

 

안녕하세요. 갓대희 입니다. 이번 포스팅은 [ React hook 중 useEffect에 대한 내용 ] 입니다. : ) 

 

 

https://ko.reactjs.org/docs/hooks-effect.html

 

 

1. useEffect 훅이란?

 

 - 컴포넌트가 렌더링 될 때 특정 작업을 실행할 수 있도록 하는 Hook이다.

 

 - 리액트의 useEffect 훅을 사용하면 함수 컴포넌트에서도 side effect를 사용할 수 있다.

1) 클래스형 컴포넌트에서는 생명주기 메소드를 사용할 수 있었는데, 이를 함수형 컴포넌트에서도 사용할 수 있게 되었다.

2) 즉, 라이프사이클 훅을 대체할 수 있게 되었다. (componentDidMount, componentDidUpdate, componentWillUnmount)

 

 - 컴포넌트가 마운트 됐을 때 (처음 나타났을 때), 언마운트 됐을 때 (사라질 때), 그리고 업데이트 될 때 (특정 props가 바뀔 때) 처리할 수 있는 방법을 살펴보자.

( 최대한 간단하게 알아보고자 하며, 자세한 내용은 공식 자습서를 참고 하면 될것 같다. ) 

https://ko.reactjs.org/docs/hooks-effect.html

 

 

2. 사용방법?

 

1. 선언방법

 

 - 첫번째 인자(effect)는 함수, 두번째 인자는 배열(deps)이 들어간다.

import react, { useEffect } from "react";
useEffect(effect, [, deps]);

 

1) effect
 - 렌더링 이후 실행할 함수(리액트는 이 함수를 기억 했다가 DOM 업데이트 후 불러낸다.)
 - effect함수에서 함수를 return 할 경우 그 함수가 컴포넌트가 Unmount 될 때 정리의 개념으로 한 번 실행된다.

 

ex1) 렌더링이 완료될 때마다 실행되는 예시

 - componentDidMount & componentDidUpdate 를 함께 표현한 것으로 볼 수 있다.

useEffect(() => {
	// 수행할 함수
});

import React, { useState, useEffect } from "react";

const UseEffectTest = () => {
  const [count, setCount] = useState(0);
  const countUp = () => setCount(count + 1);

  useEffect(() => {
    console.log("useEffect!!", count);
  });

  return (
    <div>
      <p>{count}번 클릭!</p>
      <button onClick={countUp}>Click Me</button>
    </div>
  );
};

export default UseEffectTest;

 

 - 샘플소스 : https://codepen.io/goddaehee/pen/podYVOG

 

 - 렌더링이 되었을 때, 그리고 count 스테이트가 변경될 때 마다 console.log가 찍히는 것을 볼 수 있다.

 - componentDidMount & componentDidUpdate 를 함께 표현한 것으로 볼 수 있다.

 

2) effect

 - 배열의 형태로, 특정한 값이 변경될 때 effect함수를 실행 하고 싶을 경우 배열 안에 그 값을 넣어준다.

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

 

ex2) 최초 렌더링시에만 실행되는 예시

 - jquery에서 $( document ).ready(function() { } 와 유사하다.

useEffect(() => {
	// 수행할 함수
}, 빈배열);

import React, { useState, useEffect } from "react";

const UseEffectTest = () => {
  const [count, setCount] = useState(0);
  const countUp = () => setCount(count + 1);

  useEffect(() => {
    console.log("useEffect!!", count);
  }, []);

  return (
    <div>
      <p>{count}번 클릭!</p>
      <button onClick={countUp}>Click Me</button>
    </div>
  );
};

export default UseEffectTest;

 

 - 샘플소스 : https://codepen.io/goddaehee/pen/jOaJKZO

 

 - 위의 예시와는 다르게, 최초 렌더링 시에만 console.log가 찍하는것을 볼 수 있다.

 - componentDidMount와 유사하게 볼 수 있다.

 

ex3) 특정 값이 변경될 때에만 실행하는 경우

useEffect(() => {
	// 수행할 함수
}, 특정배열);

import React, { useState, useEffect } from "react";

const UseEffectTest = () => {
  const [count, setCount] = useState(0);
  const [name, setName] = useState("GodDaeHee");
  const countUp = () => setCount(count + 1);
  const handleChangeName = (e) => setName(e.target.value);

  useEffect(() => {
    console.log("useEffect!!", count);
  }, [count]);

  return (
    <div>
      <p>안녕하세요. {name} 입니다.</p>
      <input onChange={handleChangeName} />
      <p>{count}번 클릭!</p>
      <button onClick={countUp}>Click Me</button>
    </div>
  );
};

export default UseEffectTest;

 - 샘플소스 : https://codepen.io/goddaehee/pen/xxPBzaX

 

 - name의 값이 변경될 때에는 console.log가 동작하지 않지만, count의 값이 변경될 때에는 log가 찍히는 것을 볼 수 있다.

name 이라는 값이 변경시에는 동작하지 않음.

 

count값이 변겨오딜 경우에만 동작

 

 

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

 

ex4) cleanup 함수 사용

useEffect(() => {
	// 함수 처리부
    return () => {
    	// cleanup
    }
}, 배열);

import { cleanup } from "@testing-library/react";
import React, { useState, useEffect } from "react";

const UseEffectTest = () => {
  const [count, setCount] = useState(0);
  const countUp = () => setCount(count + 1);
  const [name, setName] = useState("GodDaeHee");
  const handleChangeName = (e) => setName(e.target.value);

  useEffect(() => {
    console.log("useEffect!!", count);

    return () => {
      // clean up
      console.log("cleanup!!", count);
    }
  }, [count]);

  return (
    <div>
      <p>안녕하세요. {name} 입니다.</p>
      <input onChange={handleChangeName} />
      <p>{count}번 클릭!</p>
      <button onClick={countUp}>Click Me</button>
    </div>
  );
};

export default UseEffectTest;

 - 샘플소스 : https://codepen.io/goddaehee/pen/oNoVyQq

 

 

 - 클릭시 cleanup 함수에서는 이전 count값, 그리고 렌더링 이후 변경된 count값이 찍히는 것을 볼 수 있다.

 이를 보아 useEffect 함수가 다시 실행될 때(실행되기 직전), return 함수를 먼저 실행해 주고 넘어 가는 것으로 볼 수 있다.

 - 즉, return 함수를 추가하여 componentWillUnmount 역할을 할 수 있다.

 

앞으로 react로 프로젝트를 진행함에 있어 중요한 개념일 것 이라 생각하고, 최대한 해당 내용은 잘 이해하고 넘어 가도록 해야 겠다.