Hooks - useEffect

useEffect도 React 작업을 할때 자주 사용하는 Hook이다.

useEffect의 기능은 내가 원할때 동작, 기능을 실행 할 수 있게 하는 것이다.
그럼 어떨때 사용할 수 있는지, 어떻게 사용하는지 살펴보자.

1. useEffect를 가진 Component가 mount 되었을 때 실행

useEffect(() => {
	console.log("mount 성공");
}, []);

이 처럼 작성하면 Component가 mount된 최초에만 실행된다.
작성한 예시를 살펴보자.

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

function App() {
  const[number,setNumber] = useState(0);

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

  return <div>
    <div>Hello, world!</div>
    <button onClick={()=>{setNumber(number+1)}}>{number}</button>
  </div>
}

export default App;

이 코드는 button을 하나 생성하고 누를 때 마다 버튼의 숫자가 올라가는 것을 의도 했다.
useEffect를 사용하여 App.js가 mount되었을때 console에 "mount 성공!"이라고 작동하면 된다.

이 때 결과물을 보면 최초 mount시 console.log가 작동하고 이후엔 작동하지 않는다.

2. useEffect를 가진 Component에서 랜더링이 일어날 때 마다 실행

useEffect(() => {
	console.log("랜더링 성공");
});

이 코드는 Component에서 랜더링이 일어날 때마다 해당 코드가 실행되도록 작성했다.
마찬가지로 예시를 보자.

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

function App() {
  const[number,setNumber] = useState(0);

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

  useEffect(()=>{
    console.log("랜더링 성공!");
  })

  return <div>
    <div>Hello, world!</div>
    <button onClick={()=>{setNumber(number+1)}}>{number}</button>
  </div>
}

export default App;

1번에서 작성한 mount와 랜더링 모두를 넣고 결과를 보자.

console의 변화를 유심히 살펴보면 mount했을때 mount와 랜더링성공이 같이 작동하고,
이후 버튼을 클릭해 다시 랜더링 했을 때 "랜더링 성공!"이 반복적으로 작동하는 것을 볼 수 있다.

3. 특정 props, state가 update될 때 마다 실행

useEffect(() => {
	console.log("number는 "+number+" 입니다.");
},[number]);

이렇게 작성하면 number라는 변수(state)가 변경되어 update가 일어날 때마다 동작된다.
예시를 보자.

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

function App() {
  const[number,setNumber] = useState(0);

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

  useEffect(() => {
    console.log("number는 "+number+" 입니다.");
  },[number]);

  return <div>
    <div>Hello, world!</div>
    <button onClick={()=>{setNumber(number+1)}}>{number}</button>
  </div>
}

export default App;

이번엔 랜더링은 제외하고 mount와 number값의 변경만 살펴보자.

이번에도 mount는 최초 1회만, number의 변경은 버튼을 눌러 값이 update될 때마다 console로 알려준다.

4. 특정 Component가 unmount될 때 실행

  useEffect(()=> {
    console.log("mount 성공!");

    return ()=>{
       clearInterval(Render);
       console.log("unmount!");
    }

  },[]);

이런식으로 작성하면 해당 Component가 mount될 땐 "랜더링 성공!"을
unmount될 땐 "랜더링 종료!"를 console에서 보여준다.
예시를 보자.

App.js

import React,{useState} from 'react';
import Render from './components/Render'

function App() {
  const [showRender,setShowRender] = useState(false);

  return <div>
    {showRender && <Render />}
    <button onClick={()=>{setShowRender(!showRender)}}>Time Toggle</button>
  </div>
}

export default App;

Render.js

import React,{useEffect} from "react";

export default function Render () {

  useEffect(()=> {
    console.log("mount 성공!");

    return ()=>{
       clearInterval(Render);
       console.log("unmount!");
    }

  },[]);

  return <div>
    <span>Render.js를 불러옵니다. 콘솔을 보세요!</span>
  </div>
};

버튼을 누르면 Render.js를 mount하고, 다시 누르면 Render.js를 uumount 시킨다.

useEffect를 이용해서 mount,unmount 했을 때만 작동할 수있다.

이렇게 useEffect를 이용해 내가 원하는 명령, 함수 등을 내가 원할때만 동작할 수 있게 할 수 있다.
예시로 소개한 4가지를 응용해 여러가지 상황에서 나만의 기능동작을 코딩할 수 있다고 생각한다.