[React] Lifecycle (2023.05.24)

 

LifeCycle

 

 

현재 react는 node.js 서버 위에서 돌아가고 있음. node.js는 싱글스레드로 작업을 진행하는 프로세스가 하나 밖에 없음. 그렇기 때문에 위에서 아래로 코드가 작성된 순서대로 진행되는 java와는 달리 코드 중간에 조건문과 같은 무거운 작업이 있으면 위에서 아래로 코드 작성 순서대로 작업을 진행하지 않고, 가벼운 작업부터 진행 후 무거운 작업을 진행시킴. 

 

따라서 React에서는 위에서 아래로 순서대로 코드를 작성한다고 해서 원하는 대로 작업이 실행되지 않음. Reactsms 컴포넌트가 실행되거나, 업데이트 되거나, 삭제될 때 특정 이벤트가 발생함. 이러한 React의 특성을 생명주기(LifeCycle)이라고 하며, React를 통해 우리가 원하는 대로 웹페이지가 작동하게 만들기 위해서는 lifecycle을 이해하고 이를 바탕으로 개발을 진행하는 것이 필요함 

 

🎈 React LifeCycle 분류

컴포넌트 생성-변화-제거까지 주기를 잡을 수 있음

>> 이를 토대로 내가 원하는 시점에 코드가 들어갈 수 있도록 할 수 있음

 

 

React는 컴포넌트 기반의 View를 중심으로 한 라이브러리. View를 중심으로 하기 때문에 보통 페이지가 Rendering 되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝이 남

 

📖 Mount(마운트)

컴포넌트가 생성될 때 발생하는 생명주기

 

⚙️ constructor

- 컴포넌트 생성자 메서드, 컴포넌트가 생성되면 가장 먼저 실행되는 메서드. 이 메서드에서는 초기 state 값을 정의할 수 있음 (useState)

- 화면이 렌더링 되기 전 최초의 순간 

 

⚙️ render

- 컴포넌트를 렌더링할 때 필요한 메서드로 유일한 필수 메서드

- constructor 메서드 실행 된 이후 실행

- JSX가 HTML로 변환되어 웹브라우저에 나타남

- 화면이 렌더링 되는 중

- render 메서드는 컴포넌트가 로딩될 때에서 실행되지만 컴포넌트의 데이터(state, props)가 업데이트 되었을 때에도 동작함. 따라서 render 메서드에서 setState나 props를 변화시키는 메서드를 가능하면 수행하지 않는 것을 추천

 

⚙️ componentDidMount

 

- 컴포넌트의 첫번째 렌더링이 마치고 나면 호출되는 메서드. 이 메서드가 호출되는 시점에는 우리가 만든 컴포넌트가 화면에 나타난 상태

- 화면 렌더링 된 직후

- 데이터를 가지고 오는일을 함 (API 가져오기 등)

  프론트엔드와 백엔드가 함께 주고받는 정보들을 API라고 함

  ex. 로그인 정보

 

📖 Update(업데이트)

컴포넌트가 업데이트 되는 시점의 생명주기 

state나 props의 변경 유무로 업데이트를 판단

 

⚙️ componentDidUpdate

 

 

컴포넌트의 변경이 완료되었을 때 수행되는 메서드

render 메서드가 실행되어 업데이트 된 state, props와 업데이트 되기 전인 state, props를 가지고 비교 작업

 

📖 UnMount(언마운트)

컴포넌트가 화면세어 사라질 때 생명주기

 

⚙️ componentWillUnmount

컴포넌트가 사라질 때 수행되는 메서드

 

🎈 함수형 컴포넌트에서의 라이프사이클 

 

기존 React는 클래스 컴포넌트로 사용되었음.

(함수형 컴포넌트에서는 state 관리와 라이프사이클을 사용할 수 없었음) 

 

그러나 점점 함수형 컴포넌트를 많이 사용하게 됨

함수형 컴포넌트를 많이 사용하게 된 계기 중 하나 : react Hook

 

 

/** rcc : class component 생성하는 단축키 * 

* React Hook이라는 기능들이 생겨나면서 
* 기존 Function 컴포넌트에서 실행되지 않았던 리액트의 중요 요소들을 
* Function 컴포넌트에서 사용할 수 있게 되었음 

* * ex) 과거에는 LifeCycle 같은 중요한 개념을 Function Component에서 사용할 수 없었음
*     react Hook이 생겨나게 되면서 이제는 Function component에서도 LifeCycle을 사용할 수 있게 되었음
* *     react Hook : use~ 시작하는 것들
*     ex. useState, useRef, useContext ... etc (기존에는 사용못했던 것들) * */

 

📖 클래스 컴포넌트로 라이프사이클 확인하기

 

 

import React, { Component } from "react";

/** rcc : class component 생성하는 단축키
 *
 * React Hook이라는 기능들이 생겨나면서
 * 기존 Function 컴포넌트에서 실행되지 않았던 리액트의 중요 요소들을
 * Function 컴포넌트에서 사용할 수 있게 되었음
 *
 * ex) 과거에는 LifeCycle 같은 중요한 개념을 Function Component에서 사용할 수 없었음
 *     react Hook이 생겨나게 되면서 이제는 Function component에서도 LifeCycle을 사용할 수 있게 되었음
 *
 *     react Hook : use~ 시작하는 것들
 *     ex. useState, useRef, useContext ... etc (기존에는 사용못했던 것들)
 *
 */
export default class Ex01 extends Component {
  // state는 화면을 만들기 이전에 만들어져야 함 >> 그래야 화면에 띄어줄 수 있음
  // state 관리를 1번으로 (constructor)

  componentDidMount() {
    /**componentDidMount : 화면이 마운트됨(렌더링이 끝났음)
     * >> API call(ajax, fetch, axios...) 등 데이터를 받아오는 무거운 작업들을 진행함
     * >> 무거운 작업은 화면을 우선 보여준 후 진행되도록!
     */
    console.log("3. componentDidMount - 화면 렌더링 완료!");
  }

  componentDidUpdate() {
    /**값이 변경되어 갱신이 일어난 직후에 호출! */
    console.log("**값이 변경되었습니다!**");
  }

  constructor() {
    console.log("1. constructor - 최초생성");
    /**constructor : 생성자
     * 화면이 렌더링되기 전에 초기화 해줘야 할 것들을 정의
     * state, 변수, 함수 등 값을 초기화할 때 사용함
     * 화면이 렌더링 되기 이전 (가장 최초의 단계)
     * 규칙 :
     */
    super();
    //state 관리 : {}안에 내가 관리해줄 모든 state 입력
    this.state = {
      num: 0,
    };

    //사본함수를 만들어줌
    this.handleIncrement = this.handleIncrement.bind(this);
    this.handleDecrement = this.handleDecrement.bind(this);
    this.handleReset = this.handleReset.bind(this);
  }

  //   함수는 정확한 시점이 있는게 아니라 호출하면 사용하는 것
  handleIncrement() {
    console.log("handle Increment Function");
    this.setState({
      num: (this.state.num += 1),
    });
  }

  handleDecrement() {
    console.log("hanle Decrement Function");
    this.setState({
      num: this.state.num > 0 ? (this.state.num -= 1) : 0,
    });
  }

  handleReset() {
    console.log("handle Reset");
    this.setState({
      num: 0,
    });
  }

  render() {
    /**render : 화면을 렌더링할 때
     * >> 화면을 구성하는 요소를 작성하면 됨! (DOM요소/HTML요소)
     */
    console.log("2. render - 화면이 렌더링 되는중...");
    return (
      <div>
        <h1>Class Component : {this.state.num}</h1>
        <button onClick={this.handleIncrement}>+1</button>
        <button onClick={this.handleDecrement}>-1</button>
        <button onClick={this.handleReset}>reset</button>
      </div>
    );
  }
}

 

🎈 함수형 컴포넌트에서 라이플 사이클 사용하기 : useEffect

 

 

로직 : componentdidMount 대체

 

 

[state] : componentDidUpdate 대체

 

 

함수형 컴포넌트에서 라이프사이클을 활용할 수 있는 useEffect 사용

 

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

const Ex02 = () => {
  // 1. constructor를 대체
  // 함수 호출시 자동으로 함수 초기화를 진행함
  // >> state, 변수 초기화
  console.log("1. constructor를 대체!");
  const [num, setNum] = useState(0);

  /**3. 화면 갱신 직후 - componentDidMount >> useEffect 리액트 훅 사용
   * useEffect(()=>{}, [])
   * 첫번째 인자 : 콜백함수 (함수 안에 들어있는 함수)
   * 두번째 인자 : 비어있는 배열
   * >> 화면에 렌더링이 끝났을 때 (Mount) 첫번째 인자에 있는 콜백함수를 호출!
   * API Call과 같은 무거운 작업을 진행
   */
  useEffect(() => {
    console.log("3. 화면 렌더링 완료!");
  }, []);

  /**4. 값이 변화했을 때 - componentDidUpdate >> useEffect 리액트 훅 사용
   * useEffect(()=>{}, [state])
   * 첫번째 인자 : 콜백함수
   * 두번째 인자 : 변화를 감지할 state
   * ex. useEffect(()=>{}, [num]) >> num이라는 state가 변할때마다 콜백함수를 호출
   */
  useEffect(() => {
    console.log("** 값이 변화했습니다!");
  }, [num]);

  return (
    //2. render를 대체  >> return문 안
    <div>
      {console.log("2. render를 대체 >> return문 안")}
      <h1>Function Component : {num}</h1>
      <button
        onClick={() => {
          setNum(num + 1);
        }}
      >
        +1
      </button>
      <button
        onClick={() => {
          setNum(num - 1);
        }}
      >
        -1
      </button>
    </div>
  );
};

export default Ex02;

 

 

클래스는 한번실행되면 계속 호출되지 않음 > 생성자 1번만 생성

함수형은 호출해서 사용하는 것이므로 계속 생성자가 생성됨