[React Hooks] useEffect

useEffect 란?

- 어떠한 컴포넌트가 Mount (화면에 첫 렌더링) , Update (다시 렌더링), Unmount (화면에서 사라질 때) 에 어떤 특정 작업을 처리할 코드를 실행할 때 사용하는 hook 

 

useEffect 기본 구문

 

1. 인자로 콜백함수만 받는 경우

useEffect(() => { 작업 }}

렌더링이 될 때 마다 실행이 됨

 

2. 첫번째 인자로 콜백함수를 받고 , 두번째 인자로 배열 (dependency array)을 받는 경우

useEffect(() => {
	작업  
}, [value])

화면에 첫 렌더링이 될 때 실행됨, value 의 값이 변경될 때 실행됨
만약 빈 배열을 줄 경우, 화면이 처음 렌더링 될 때만 실행됨

 

useEffect 기초 예제

 

1. 계속 렌더링 될 경우

function App() {
  const [count, setCount] = useState(1);

  const handleCountUpdate = () => {
    setCount(count + 1)
  }

  useEffect(() => {
    console.log("렌더링")
  })

  return (
    <div className="App">
      <button onClick={handleCountUpdate}>Update</button>
      <span>
        count : {count}
      </span>
    </div>
  );
}

 

2. 특정 요소가 변화할때만 useEffect 를 실행 할 경우

두 번째 인자로 배열을 주면 되는데, 변화 될 값을 넣어주도록 한다.

function App() {
  const [count, setCount] = useState(1);
  const [name, setName] = useState("")

  const handleCountUpdate = () => {
    setCount(count + 1)
  }

  const handleInputChange = (e) => {
    setName(e.target.value)
  }

  useEffect(() => {
    console.log("렌더링")
  }, [count])

  return (
    <div className="App">
      <button onClick={handleCountUpdate}>Update</button>
      <span>
        count : {count}
      </span>
      <input type="text" value={name} onChange={handleInputChange} />
      <span>name : {name}</span>
    </div>
  );
}

 

3. 마운팅 될 때만 useEffect 실행 할 경우

두 번째 인자로 빈 배열을 주면, 마운팅 (첫 렌더링)할 때만 실행된다.

function App() {
  const [count, setCount] = useState(1);
  const [name, setName] = useState("")

  const handleCountUpdate = () => {
    setCount(count + 1)
  }

  const handleInputChange = (e) => {
    setName(e.target.value)
  }

  useEffect(() => {
    console.log("마운팅")
  }, [])

  return (
    <div className="App">
      <button onClick={handleCountUpdate}>Update</button>
      <span>
        count : {count}
      </span>
      <input type="text" value={name} onChange={handleInputChange} />
      <span>name : {name}</span>
    </div>
  );
}

 

 

Clean up 함수란?

1. useEffect 안에서 return 할 때 실행 된다. (useEffect 의 뒷정리를 해주는 함수)

2. 컴포넌트가 마운트 될 때 이벤트 리스너를 통해 이벤트를 추가했다면 컴포넌트가 언마운트 될 때 이벤트를 삭제해주어야 한다.

그렇지 않으면 컴포넌트가 리렌더링 될 때마다 새로운 이벤트 리스너가 핸들러에 바인딩 될 것이다.
=> 이는 자주 리렌더링 될 경우에 메모리 누수가 발생함

 

Clean up 사용 예제

 

1. Timer 컴포넌트 생성

컴포넌트가 사라질 때 이벤트를 삭제해주기 위해서 컴포넌트를 만드는 것임.

import React, { useEffect } from "react";

function Timer({ props }) {
  useEffect(() => {
    const timer = setInterval(() => {
      console.log("타이머 돌아가는중 ...");
    }, 1000);

    return () => {
      clearInterval(timer);
      console.log("타이머가 종료되었습니다.");
    };
  }, []);
  return (
    <div>
      <span>타이머를 시작합니다. 콘솔을 보세요!</span>
    </div>
  );
}

export default Timer;

1. Timer 컴포넌트가 첫 렌더링 되었을 때, 1초에 한번씩 콘솔로그에 "타이머 돌아가는 중..." 이 나옴.
2. Timer 컴포넌트가 화면에서 사라질 때 (즉, 언마운트 되었을 때) timer 의 setInterval 함수가 종료될 수 있도록 return으로 이벤트를 삭제해준다. (clearInterval)

 

2. App.js 에서의 작업

토글을 해서, 컴포넌트가 마운트했다가 언마운트될 수 있도록 해준다.

function App() {
  const [showTimer, setShowTimer] = useState(false)

  return (
    <div className="App">
      {showTimer && <Timer />}
      <button onClick={() => setShowTimer(!showTimer)}>Toggle Timer</button>
    </div>
  );
}

 

 

mount 작업과 unmount 작업

 

1. Mount 시에 하는 작업들

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

 

2. UnMount 시에 하는 작업들

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