인프런 커뮤니티 질문&답변

import { useState } from 'react'
import Viewer from './components/Viewer'
import Controller from './components/Controller'
import { useEffect } from 'react'
import { useRef } from 'react'
import Even from './components/Even'
import './App.css'

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")
  })
  //3. 언마운트 : 죽음


  //useEffect(()=>{console.log(count)},[count, input]) // 의존성 배열, dependency array, deps
  const onClickButton = (value)=>{
    setCount(count + value);
  }
  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

import { useEffect } from "react";

const Even = () => {
    useEffect(() => {
    //클린업, 정리함수
        return () => {
            console.log("unmount")
        };
    }, []);

    return <div>짝수입니다</div>;
};

export default Even;

새로고침이나 초기 호출시에도 unmount가 출력되고 홀수로 카운팅이 올라가 컴포넌트가 삭제되는 경우는 update이후 unmount가 정상적으로 출력되는 것을 확인할 수 있는데 짝수로 카운팅이 올라가 컴포넌트가 생성되는 경우는 unmount 이후 update가 됩니다.

컴포넌트가 삭제되는 경우에만 unmount가 진행되는 것으로 알고 있는데 혹시 코드에 문제가 있을까 질문드립니다.