[REACT] useEffect로 라이프사이클 관리하기

useEffect

리액트 컴포넌트의 사이드 이펙트를 제어하는 것

• React 에서의 사이드 이펙트: 컴포넌트 동작에 따라 파생되는 여러 효과

사용법

  useEffect(()=>{}, [])

두번째 자리인 [] 안에는 변경을 감지하고 싶은 타겟 값을 넣어주고 첫번째 자리인 {} 안에는 두번째 값이 변했을때 원하는 동작을 정의해준다.

ex

import './App.css'
import Viewer from './components/Viewer'
import Controller from './components/Controller'

import { useState, useEffect } from 'react'

function App() {
  const [count , setCount] = useState(0);
  const [input , setInput] = useState("");

  useEffect(()=>{
    console.log(`count: ${count} / input: ${input}`);
  }, [count, input])

  const onClickButton = (value) => {
      setCount(count + value);
  };

  <title>Counter</title>
  return (
    <div className="App">
    <h1>Simple counter</h1>
    <section><input value={input} onChange={(e)=>{
      setInput(e.target.value);
    }} /></section>
    <section><Viewer count={count} /></section>
    <section><Controller onClickButton={onClickButton} /></section>

    </div>
  )
}

export default App

궁금점

useEffect를 사용안하고 그냥 버튼에 로그 찍으면 되잖아요??

값이 변경되기 이전의 값을 출력한다.

setCount 라는 상태변화 함수는 비동기로 동작한다.

다시말해 React 의 state는 업데이트는 비동기로 진행이 된다.

때문에 setCount를 호출한다고 한들, 바로 변경이 되지 않기 때문에 이전값을 출력한다.

 const onClickButton = (value) => {
      setCount(count + value);
      console.log(`button count: ${count}`);
  };

때문에 상태가 변경되었을때 그 이후 사이드 이펙트의 부가 작업을 진행하고 싶다면 useEffect를 사용해야 한다.

useEffect로 라이프사이클 관리하기

App.jsx

import './App.css'
import Viewer from './components/Viewer'
import Controller from './components/Controller'
import Even from './components/Even'

import { useState, useEffect, useRef } from 'react'

function App() {
  const [count , setCount] = useState(0);
  const [input , setInput] = useState("");

  const isMount = useRef(false);

  // 1. 마운트: 탄생
  useEffect(()=>{
    console.log('mount');
  }, []);

  // 2. 업데이트: 변화, 리렌더링
  useEffect(()=>{
    if(!isMount.current){
      isMount.current=true;
      return;
    }
    console.log("update");
  });


  useEffect(()=>{
    //console.log(`count: ${count} / input: ${input}`);
  }, [count, input])

  const onClickButton = (value) => {
      setCount(count + value);
      console.log(`button count: ${count}`);
  };

  <title>Counter</title>
  return (
    <div className="App">
    <h1>Simple counter</h1>
    <section><input value={input} onChange={(e)=>{
      setInput(e.target.value);
    }} /></section>
    <section>
      <Viewer count={count} />
      {count % 2 === 0 ? <Even />: null}
    </section>
    <section><Controller onClickButton={onClickButton} /></section>

    </div>
  )
}

export default App

Even.jsx

import { useEffect } from "react";

const Even = () => {
    useEffect(() => {
        // 3. 언마운트: 죽음
        // 클린업, 정리함수
        return () => {
            console.log("unmount");
        };
    }, []);
    return <div>짝수입니다</div>;
};

export default Even;

 

결과

mount시

update시

unmount시