[26.02.03] React 재직자 교육 6 - 컴포넌트 라이프 사이클 Component Life Cycle

use로 시작하는 것은? Hook훅이다

 

라이프사이클과 관련된 콜백

useEffect

콜백을 시키는 훅이다

 

첫번째 매개값에는 콜백 함수를 작성한다.

두번째 매개값이 어떤지에 따라서 이 콜백의 실행 시점을 결정하게 된다.

useEffect(() => {
//마운트 또는업데이트후실행
return () => {
//언마운트시 또는업데이트전실행
};
}, […]);

상태가 업데이트 된 후 마운트

언마운트는 상태가 업데이트 되기 전 실행

 

return은 보통 생략한다.

 

1)

두번째 매개변수 [ ] 빈배열이면 생성될때 딱 한번만 실행이 된다.

retrun이 없으니 언마운트 없는것이다.

2)

두번째 매개변수 없으면 처음에 호출할때 그 후 리랜더링 일어날때마다 호출됨

 

3)

관심대상이 변경이 되면 실행

useState(()=>{

/* 실행할부분 */

, [관심대상]

});

 

"use client"

import { useEffect, useState } from "react";

function Ch04LifeCycle() {
  const [count1, setCount1] = useState(1);
  const [count2, setCount2] = useState(101);

  // 마운트/언마운트, 업데이터 전/후 모두 관심이 있을 경우
  // useEffect(() => {
  //   console.log("마운트/업데이트후 실행");
  //   return () => {
  //     console.log("언마운트/업데이트전 실행");
  //   };
  // });

  //마운트/언마운트만 관심이 있을 경우
  // useEffect(() => {
  //   console.log("마운트 실행");
  //   return () => {
  //     console.log("언마운트 실행");
  //   };
  // }, []); 

  //마운트/언마운트, count1 상태로 인한 업데이터 전/후에 관심이 있을 경우
  useEffect(() => {
    console.log(`마운트/count1 업데이트후 실행(count1=${count1})`);
    return () => {
      console.log(`언마운트/count1 업데이트전 실행(count1=${count1})`);
    };
  }, [count1]);  // count1이 바뀌었을 때만 리랜더링됨


  //마운트/언마운트, count2 상태로 인한 업데이터 전/후에 관심이 있을 경우
  // useEffect(() => {
  //   console.log(`마운트/count2 업데이트후 실행(count2=${count2})`);
  //   return () => {
  //     console.log(`언마운트/count2 업데이트전 실행(count2=${count2})`);
  //   };
  // }, [count2]);   


  const addCount1 = (event) => {
    setCount1(count1 + 1);
  };

  const addCount2 = (event) => {
    setCount2(count2 + 1);
  };  

  return (
    <div className="card">
      <div className="card-header">Ch04LifeCycle</div>
      <div className="card-body">
        <button className="btn btn-info me-2" onClick={addCount1}>count1 증가</button>
        <button className="btn btn-info" onClick={addCount2}>count2 증가</button>
      </div>
    </div>
  );
}

export default Ch04LifeCycle;