LifeCycle 제어하기

조뮁·2022년 10월 27일

React

목록 보기

14/34

React 컴포넌트의 LifeCycle

컴포넌트 라이프사이클 제어

컴포넌트가 생성 ~ 사라지기 까지의 과정에 우리가 원하는 작업을 수행시킬 수 있음

리액트 라이프사이클 메서드

리액트는 각 생애주기마다 사용할 수 있는 메서드를 가지고 있음

ComponentDidMount

컴포넌트가 생성(Mount)되는 순간에 실행할 수 있는 메서드

ComponentDidUpdate

컴포넌트가 변화(Update)하는 순간에 사용할 수 있는 메서드

ComponentWillUnmount

컴포넌트가 사라지는(Unmount) 순간에 사용할 수 있는 메서드

위 메서드들은 클래스형 컴포넌트에서만 사용할 수 있음

현재까지는 함수형 컴포넌트(화살표 함수 이용)만 사용했기 때문에, 라이프사이클 제어 메서드를 사용할 수 없음
(하지만, state도 원래는 클래스형 컴포넌트에서만 사용 가능한 기능)

React Hooks

state등과 같은 클래스형 컴포넌트의 기능을 함수형 컴포넌트에서 사용할 수 있게 해주는 기술
ex) useState, useEffect, useRef ...
useEffect : React의 라이프사이클을 제어할 수 있는 메서드를 사용할 수 있게 해주는 React Hooks

함수형 컴포넌트를 사용하는 이유

Class형 컴포넌트에 비해 코드의 길이가 짧음
중복 코드를 줄일 수 있음
가독성 향상

useEffect

사용법

1번 파라미터 : callback 함수
2번 파라미터 : Dependency Array / Depth / 의존성 배열
--> 이 배열 내에 들어있는 값이 변경되면 1번 파라미터로 받은 콜백 함수 실행

useEffect 실습

// Lifecycle.js
import React, { useEffect, useState } from "react";

const Lifecycle = () => {
  const [count, setCount] = useState(0);
  const [text, setText] = useState("");
  return (
    <div style={{ padding: 20 }}>
      {count}
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        +
      </button>
      <input
        value={text}
        onChange={(e) => {
          setText(e.target.value);
        }}
      ></input>
    </div>
  );
};

export default Lifecycle;

1. ComponentDidMount

컴포넌트가 생성(mount) 되었을 시 실행되는 함수
Depth가 빈 배열로 전달되었기 때문에, 컴포넌트가 mount된 때에만 실행됨

  useEffect(() => {
    console.log("mount");
  }, []);

컴포넌트가 최초 실행되었을 때만 한 번 수행되고, state가 변경되어도 더 이상 실행되지 않음.

2. ComponentDidUpdate

모든 state변경 시 실행

// state가 업데이트 되는 순간을 useEffect로 제어
  // dependency array 전달 안함
  useEffect(() => {
    console.log("update");
  });

컴포넌트가 최초 생성 시, mount와 update 한 번씩 실행됨
button을 누르거나 input에 값을 입력할 때 마다 update 실행됨

특정 state 변경 시 실행
(1) dependency array에 state 값을 넣어줄 경우, 해당 state가 업데이트 될 때에만 함수 실행됨

  // dependency array에 count state만 전달
  useEffect(() => {
    console.log("update");
  }, [count]);

(2) 특정 조건을 걸어서 state 변화도 가능함

// count값이 5를 넘었는지 알아보고, 1로 초기화하는함수
  useEffect(() => {
    if (count > 5) {
      alert("최대값은 5를 넘을 수 없습니다.");
      setCount(1);
    }
  }, [count]);

3. ComponentWillUnmount

useEffect가 return될 때 실행하는 함수는 컴포넌트가 unmount될 때 실행됨

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

const UnmountTest = () => {
  // 컴포넌트가 unmount되는 순간 제어
  useEffect(() => {
    console.log("mount!");
    // useEffect 내에서 return 되는 함수는, 컴포넌트가 unmount될 때 실행됨
    return () => {
      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 = true 일 경우, <UnmountTest/> 컴포넌트가 렌더링됨 */}
      {/* isVisible = false일 경우, &&에 의해 단락회로평가가 false가 되기 때문에 <UnmountTest/> 컴포넌트가 랜더링되지 않음 */}
      {isVisible && <UnmountTest />}
    </div>
  );
};

export default Lifecycle;