Lifecycle

Heechang Jeong·2023년 4월 27일
0
post-thumbnail

✍ 복습 자료

  • React 컴포넌트의 생애 주기 (생명 주기)

  1. 탄생
    화면에 나타나는 것 Mount
    ComponentDidMount

  2. 변화
    업데이트(리렌더) Update
    ComponentDidUpdate

  3. 죽음
    화면에서 사라짐 UnMount
    ComponentWillUnmount

import React, { useEffect, useState } from "react";

const UnmountTest = () => {
  useEffect(() => {
    console.log("Mount!");

    return () => {
      // Unmount 시점에 실행되게 됨
      console.log("Unmount!!");
    };
  }, []);
  return <div>Unmount Testing Component</div>;
};
const Lifecycle = () => {
  const [isVisible, setIsVisible] = useState(false);
  const toggle = () => setIsVisible(!isVisible);

  return (
    <div style={{ padding: 20 }}>
      <button onClick={toggle}>ON/OFF</button>
      {isVisible && <UnmountTest />}
    </div>
  );
};

export default Lifecycle;

  • ON/OFF button 첫 번째 클릭했을 때

  • ON/OFF button 두 번째 클릭했을 때


  • React Hooks

    2019.06 정식 출시된 기능
    Class형 Component의 길어지는 코드 길이 문제
    중복 코드, 가독성 문제 등을 해결하기 위해 등장했다.

0개의 댓글