[포스코x코딩온] 웹개발자 입문 과정 8주차 | Life Cycle

1.Life Cycle

 Life Cycle이란 수명 주기를 의미한다.

 그럼 누구의 수명 주기인가? 컴포넌트의 수명 주기이다.

 그럼 어떨 때 사용하는가?

 보통 컴포넌트의 수명은 페이지에 렌더링 되기 전에 시작하여 페이지에서 사라질 때 끝난다.

 이 라이프사이클을 사용하면 컴포넌트를 처음 렌더링할 때 어떤 작업을 처리하거나,

 컴포넌트를 업데이트하기 전 어떤 작업을 처리해야할 때 사용한다.

 

 가.분류

  라이프사이클은 총 세가지 카테고리로 나뉘는데

  마운트, 업데이트, 언마운트가 있다.

• 마운트: DOM이 생성되고 웹브라우저 상에 나타남
• 업데이트: props나 state가 바뀌었을 때 등등 업데이트함
• 언마운트: DOM에서 컴포넌트가 제거될 때 

  위와 같이 각각의 수명 주기일 때에 맞추어  어떤 작업을 끼워넣는다고 생각하면 된다.

Life Cycle

 나.사용 방법

  함수형 컴포넌트와 클래스형 컴포넌트의 사용 방법이 다르다.

  간략하게는 아래와 같다.

• 함수형 컴포넌트 => useEffect()사용
  • 마운트 or 업데이트 : useEffect(()=>{})
  • 마운트만 : useEffect(()=>{}, [])
  • 업데이트 : const[data, setData] = useState(); useEffect(()=>{},[data])

 

• 클래스형 컴포넌트 => 내장 메서드 사용
  • 마운트 : componentDidMount
  • 업데이트 : componentDidUpdate
  • 언마운트: comopnentWillUnmount

  클래스형 컴포넌트에서 라이프사이클에 관련된 많은 메서드가 있으나 자주 사용되는 것은 위와 같다.

  모든 클래스를 알아야하는 것은 아니고, 이제는 함수형클래스만 사용하므로

  참고만 하면 좋을 것 같다.

  

2.실습

 먼저 함수형 컴포넌트 사용방법은 아래와 같다.

 가.함수형 컴포넌트

   1)부모 컴포넌트

// 컴포넌트들이 진짜 업데이트 되는지 확인
import { useState } from "react";
import LifeCycleFuncChild from "./LifeCycleFuncChild";

// 부모 컴포넌트
const LifeCycleFunc = () => {
  const [visible, setVisible] = useState(true);
  const changeVisible = () => {
    setVisible(!visible);
  };
  //자식에서 사용하지만 단방향이라 부모에서 state정의
  const [number, setNumber] = useState(5);
  const changeNumber = () => {
    setNumber(number + 1);
  };
  return (
    <>
      <button onClick={changeNumber}>PLUS</button>
      <button onClick={changeVisible}>ON/OFF</button>
      {/* 부모 컴포넌트에서 데이터를 Prop사용해서 넘김 */}
      {visible && <LifeCycleFuncChild number={number} />}
    </>
  );
};

export default LifeCycleFunc;

 

   2)자식 컴포넌트 

// 자식 컴포넌트
// 자식 컴포넌트만 변함 -> useEffect 자식에서 불러옴
import { useState, useEffect } from "react";

//props: 부모에서 받은 데이터(=number state)
// const LifeCycleFuncChild = (props) => {
// props = {number}
const LifeCycleFuncChild = ({ number }) => {
  const [text, setText] = useState("");
  //   console.log("props >>", props); //props >> {number: 5}
  // 구조분해 할당으로 number의 값만 꺼냄
  //   const { number } = props; //5

  //1.컴포넌트가 Mount될 때만 동작
  //   useEffect(() => {
  //     console.log("mount!!!!");
  //   }, []);

  //1.컴포넌트가 Mount될 때 +  unMount 될 떄 동작
  //   useEffect(() => {
  //     //mount 시점에 실행
  //     //특정 컴포넌트가 나타날 때 동작=> useEffect 안에 작성
  //     console.log("mount!!!!");
  //     //unmount 시점에 실행
  //     //특정 컴포넌트가 사라질 때 동작=> return () 안에 코드 작성
  //     return () => {
  //       console.log("unmount!!!!");
  //     };
  //   }, []);

  //2.mount & update 시점에 실행 - []제거
  //   useEffect(() => {
  //     console.log("mount  or  update!!!!");
  //   });

  //3.text state가 바뀔 때 마다 실행
  useEffect(() => {
    console.log("mount or update!!!!");
  }, [text]);
  return (
    <>
      <p>
        LifeCycleFuncChild <b>{number}</b>
      </p>
      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
    </>
  );
};
export default LifeCycleFuncChild;

 

 나.클래스형 컴포넌트

   1)부모 컴포넌트

//부모 클래스
import React from "react";
import LifeCycleClassChild from "./LifeCycleClassChild";

class LifeCycleClass extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      number: 7,
      visible: true,
    };
  }
  changeNumber = () => {
    this.setState({ number: this.state.number + 1 });
  };
  changeVisible = () => {
    this.setState({ visible: !this.state.visible });
  };
  render() {
    return (
      <>
        <button onClick={this.changeNumber}>PLUS</button>
        <button onClick={this.changeVisible}>ON/OFF</button>
        {this.state.visible && (
          <LifeCycleClassChild number={this.state.number} />
        )}
      </>
    );
  }
}
export default LifeCycleClass;

 

   2)자식 컴포넌트 

//자식 컴포넌트
import React from "react";

class LifeCycleClassChild extends React.Component {
  //컴포넌트가 Mount 되었을 때 실행
  componentDidMount() {
    console.log("mount!!!");
  }
  //컴포넌트가 Update되었을 때 실행
  componentDidUpdate() {
    console.log("update!!!");
  }
  //컴포넌트가 Unmount되었을 때 실행
  componentWillUnmount() {
    console.log("unmount!!!");
  }
  render() {
    return <p>LifeCycleClassChild {this.props.number}</p>;
  }
}

export default LifeCycleClassChild;