[리액트를 다루는 기술] useEffect의 cleanup 함수로 mount & unmount 확인

쿼카쿼카·2022년 9월 2일
0
// Info.js
import React, {useEffect, useState} from 'react'

export default function Info() {
  const [name, setName] = useState('');
  const [nickname, setNickname] = useState('');

  useEffect(() => {
    console.log('effect'); // mount 및 name 변경 시 작동
    console.log(name);
    return () => {
      console.log('cleanup'); // unmount 및 name 변경시 작동
      console.log(name);
    }
  }, [name]);

  useEffect(() => {
    console.log('mount effect'); // mount 시 작동
    return () => {
      console.log('unmount cleanup') // unmount 시 작동
    }
  }, []);

  function onChangeName(e) {
    setName(e.target.value);
  }

  function onChangeNickname(e) {
    setNickname(e.target.value);
  }

  return (
    <>
      <div>
        <input value={name} onChange={onChangeName} />
        <input value={nickname} onChange={onChangeNickname} />
      </div>
      <div>
        <div>
          <b>이름: </b>{name}
        </div>
        <div>
          <b>닉네임: </b>{nickname}
        </div>
      </div>
    </>
  )
}
// App.js
import React, { useState } from "react";
import Info from "./Info";

function App() {
  const [visible, setVisible] = useState(false);
  return (
    <>
      <button onClick={() => {
        setVisible(!visible);
      }}>
        {visible ? '숨기기' : '보이기'}
      </button>
      <hr />
      {visible && <Info />}
    </>
  )
}

export default App;
  • mount 시 'mount effect' 호출 및 name 변수가 생성되므로 'effect'도 호출
  • name 값 변경 시 'cleanup'을 출력 & 직전 name 값 출력
  • unmount 시 'unmount cleanup' 호출 및 name 변수 사라지므로 'cleanup'도 호출

개발자 도구에서 mount -> unmount -> mount 되는 현상

profile
쿼카에요

0개의 댓글