🌏React Hooks (2).useEffect

import { useEffect, useState } from "react";

const Info = () => {
  const [name, setName] = useState("조혜진");
  const [nickName, setNickName] = useState("RootCho");

  useEffect(() => {
    console.log("마운트 될 때만 실행");

    return () => {
      console.log("언마운트 될 때 실행");
    }; //이 컴퍼넌트가 화면에서 사라질 때 실행. 뒷정리(cleanup)함수
  }, []);

  useEffect(() => {
    console.log("렌더링이 완료되었습니다."); //첫 마운트 될때, name이 업데이트 될 때마다 실행. Why? deps 배열의 value값이 name이니까
    return () => {
      console.log("clean-up"); //기존 name이 입력창에서 사라질 때 실행
      console.log(name); //기존 name이 콘솔에 찍힘
    };
  }, [name]);

  return (
    <>
      <div>
        <input
          value={name}
          placeholder="이름"
          onChange={(e) => setName(e.target.value)}
        />
        <input
          value={nickName}
          placeholder="닉네임"
          onChange={(e) => setNickName(e.target.value)}
        />
      </div>
      <h1>이름: {name}</h1>
      <h1>닉네임: {nickName}</h1>
    </>
  );
};

export default Info;

useEffect

컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정

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

첫번째 인자에는 콜백함수, 두번째 인자에는 의존성 배열[ ]이 담긴다.

useEffect(()=>{
console.log("마운트 될 때 실행")}) //렌더링될 때 마다 실행

useEffect(()=>{
console.log("마운트 될 때 실행")},[ ]) //맨 처음 마운트 되었을 때 실행 (최초 한 번)

useEffect(()=>{
console.log("마운트 될 때 실행")},[name])//맨 처음 마운트 되었을 때 실행 & 특정 값(name)이 렌더링 될 때마다 실행

useEffect(()=>{
console.log("마운트 될 때 실행")

return () => {
     console.log("언마운트 될 때 실행"); //뒷정리(cleanup)함수. 이 부분은 해당 컴포넌트가 언마운트 되었을 때 실행 
   }},[])

❓ 컴포넌트 라이프사이클

마운트 : 페이지에 컴포넌트가 나타남.
업데이트(<-리렌더링) : 컴포넌트 정보를 업데이트.
언마운트 : 페이지에서 컴포넌트가 사라짐.