[React] React Hooks(2) - useEffect

• Mount : 화면에 첫 렌더링
• Update : 다시 렌더링
• Unmount : 화면에서 사라짐

useEffect

• React component가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 리액트 Hook이다.
• 기본적으로 인자로 콜백함수를 받는다.

useEffect에는 두가지 형태가 존재한다.

1. 인자로 콜백함수만 받는 형태

useEffect(() => {
	// 작업
});

컴포넌트가 렌더링 될때 마다 실행된다.

2. 인자로 콜백함수와 배열(dependency array)을 받는 형태

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

화면에 첫 렌더링 될 때와 배열이 변경 될 때 실행된다.
(만약 빈 배열을 전달하면 처음 화면이 렌더링될 때만 실행된다.)

[예제1] 기본 예제

import { useState, useEffect } from 'react';

function App() {
  const [count, setTime] = useState(1);
  const [name, setName] = useState('');
  
  const handleCountUpdate = () => {
    setCount(count + 1);
  };
  
  const handleInputChange = (e) => {
    setName(e.target.value);
  };
  
  // 렌더링마다 실행 - 렌더링 이후
  useEffect(() => {
  	console.log('렌더링');
  });
  
  // 마운팅 + count가 변경될 때 마다
  useEffect(() => {
    console.log('count 변화');
  }, [count]);
  
  // 마운팅 + name이 변경될 때 마다
  useEffect(() => {
    console.log('name이 변화');
  }, [name]);
  
  // 마운팅
  useEffect(() => {
    console.log('마운팅');
  }, []);
  
  return (
    <div>
      <button onClick={handleCountUpdate}>Update</button>
      <span>count : {count}</span>
      <input type="text" value={name} onChange={handleInputChange} />
      <span>name: {name}</span>
    </div>
  );
}

export default App;

[예제2] Clean Up에 활용하기

✔ Clean Up - 정리

사용완료한 것들을 clean up 할 때 useEffect 안에 return으로 구현한다.

import { useState, useEffect } from 'react';
import Timer from './component/Timer';

function App() {
  const [showTimer, setShowTimer] = useState(false);
  return (
    <div>
    	{showTimer && <Timer />} // showTimer가 true면 Timer 보이기
    	<button onClick={() => setShowTimer(!showTimer)}>Toggle Timer</button>
    </div>
  );
}

export default App;

• Timer 컴포넌트는 showTimer가 True일 때만 보이도록 한다.
  토글 버튼을 누르면 True이면 False로 False면 True로 state를 변경해준다.

• showTimer가 True이면 Timer를 마운트하고, 마운트시 useEffect 내부의 작업이 실행되고 1초마다 콘솔 로그에 '타이머 돌아가는중...' 이라는 메세지가 찍힌다.
  

• 중요한 것은 토글 버튼을 눌러 Timer가 언마운트 되었을 때는 타이머도 같이 사라져야한다.
  여기에서 clean up이라는 개념이 등장한다.

useEffect의 return에 콜백함수를 주고 그 내부에 정리작업을 하는 코드를 넣어준다.

Timer.js

import React, { useEffect } from 'react';

const Timer = (props) => {
  // Timer Component Mount시 실행
  useEffect(() => {
    const timer = setInterval(() => {
      console.log('타이머 돌아가는중...');
    }, 1000);
    
    // clean up, Timer Component Unmount시 실행
    return () => {
      clearInterval(timer);
      console.log('타이머가 종료되었습니다.');
    };
  }, []);
  
  return (
    <div>
    	<span>타이머를 시작합니다. 콘솔을 보세요!</span>
   	</div>
  );
};

두번째 인자를 빈 배열[]로 줌으로써 처음 마운팅 되었을 때만 실행된다.
즉, 타이머가 브러우저에 맨처음 마운팅 되었을 때 useEffect 안의 콜백함수가 실행된다.

• setInterval()

  출처 : https://www.daleseo.com/js-timer/
  setInterval() 함수는 어떤 코드를 일정한 시간 간격을 두고 반복해서 실행하고 싶을 때 사용합니다. 함수 API는 setTimeout() 함수와 대동소이한데요. 첫번째 인자로 실행할 코드를 담고 있는 함수를 받고, 두번째 인자로 반복 주기를 밀리초(ms) 단위로 받습니다.