[React] 리액트의 클래스형 컴포넌트 생명주기, 근데 함수형 컴포넌트와 Hook은 또 뭔데?

 

 

리액트의 생명주기와 Hook에 대해 모르니
프로젝트 코드 작성이 어려워지기 시작했다.
이 둘에 대해 알아보자!

 

 

 

1. 생명주기

• 라이프 사이클은 컴포넌트가 사용되고 소멸될 때까지 일련의 과정을 말한다.
• 라이프 사이클에는 mounting(생성) - updating(업데이트) - unmounting(제거)이 있으며, UI를 화면에 내보내고 다른 UI로 보이게 하고, 현재 보이는 UI를 화면에서 제거하는 과정을 가진다.
• 이 과정 안에는 특정 시점에 자동으로 호출되는 메서드가 있다.
• 제대로 된 기능을 수행하기 위해 이 메서드들이 필요한 순간에 필요한 작업을 한다.

 

 

- 리액트 라이프 사이클

[React] 리액트 라이프 사이클

 

 

 

 

---

 

 

 

 

2.  잘 사용하지 않는 클래스형 컴포넌트 

Q. 먼저! 검색하다보면 클래스형 컴포넌트 생명주기가 있고 함수형 컴포넌트 생명주기가 있다. 이 둘의 차이가 뭘까?

A. 클래스형 컴포넌트는 React.Component를 상속받아 render( )와 라이프사이클 메서드인 componentDidMount 등으로 마운트/업데이트/언마운트 시점의 로직을 분리한다. 함수형 컴포넌트는 단순한 함수 형태로 작성되는데 useState, useReducer로 상태를 관리하고 useEffect를 통해 렌더링 이후 실행되어야하는 부수효과와 cleanup을 구현한다. 요새는 함수형 + 훅을 널리 사용한다. 그래서 리액트 라이프사이클 혹은 리액트 생명주기라고 검색하면 함수형 컴포넌트인 useEffect에 대한 사이클 설명이 많이 나오는 듯 하다. 

 

• 잘 사용하지 않는 메서드

 

[생성]
a) 생성될 때는 constructor - static getDerivedStateFromProps - render - React updates DOM and refs - componentDidMount 순서를 가진다. 
b) 이 과정 중 static getDerivedStateFromProps는 지금은 잘 사용하지 않는다. 
c) static getDerivedStateFromProps는 props 변화에 따라 state를 계산해서 동기화 할 때 사용하는데,  props와 state가 같은 의미의 데이터를 동시에 들고 있을 경우 싱크가 꼬이는 등 문제로 인해 잘 사용하지 않는다.

[업데이트]
a) 업데이트 할 때는 static getDerivedStateFromProps - shouldComponentUpdate - render - getSnapshotBeforeUpdate - React updates DOM and refs - componentDidUpdate 순서를 가진다.
b) 이 과정 중  static getDerivedStateFromProps, shouldComponentUpdate(nextProps, nextState), getSnapshotBeforeUpdate(prevProps, prevState) 잘 사용하지 않는다.
c) shouldComponentUpdate(nextProps, nextState)는 업데이트를 할지 말지 결정하는 역할을 하는데, 업데이트를 막을지 말지에 대한 판단 실수로 인해 지금은 잘 사용하지 않는다. 
d) getSnapshotBeforeUpdate(prevProps, prevState)는 DOM이 바꾸기 전에 현재 DOM 상태를 읽어 스냅샷 값을 반환한다. 이 메서드의 경우 특수한 경우 사용한다.

[Deprecated]
a) Deprecated로 더 이상 사용하지 않는 것들도 있으며, 사용하려면 앞에 unsafe를 붙여야한다.
b) Deprecated된 메서드는 componentWillMount, componentWillReceiveProps,componentWillUpdate가 있다.
c) will-은 어떤 작업을 수행하기 전에 실행되는 메서드와 관련된 용어이며 렌더링 단계 쪽에 붙어있다.
d) 더이상 사용하지 않는 이유는 위의 메서드들에 부수효과(네트워크 요청, 이벤트 등록, 로그/트래킹, 타이머 시작)를 넣을 수 있는데, 부수효과로 인해 중복이 일어나면서 버그가 터지기 쉽기 때문이다.
e) 아예 사용이 불가능한 것은 아니고 UNSAFE_ 접두어를 붙이면 사용할 수 있다.

 

 

 

 

---

 

 

 

 

3.  클래스형 컴포넌트 생명주기

[Mounting - 생성]

• 마운팅 관련 함수들은 처음 render가 호출된 후, component가 생성(instance화)되고, 실제 DOM으로 적용될 때 까지를 담당한다. render를 제외하고 한번씩만 호출된다고 보면 된다.
  
  
• constructor(props)
  a) React component가 mount 과정에서 가장 먼저 호출된다. →  DOM으로 mount되기 전에 호출된다.
  b) 컴포넌트가 호출되어 로드가 된 이후 렌더링되기 이전에 '데이터바인딩', '초기화'를 수행하기 위해 호출되는 함수를 의미한다.
  c) 데이터 바인딩은 화면상에 보여지는 데이터(View)와 브라우저 메모리에 있는 데이터(Model)을 묶어서(Binding) 서로 간의 데이터를 동기화하는 것을 의미한다. 예를 들면, 변경된 값에 따라서 HTML 상에 데이터를 맞추어 주는 동작을 데이터 바인딩이라고 한다. (약간 계산기 같은 것?)
  d) 해당 함수 내부에서, component의 state의 저장공간에 변수값을 초기화할 때 사용한다. state를 별도로 사용할 필요가 없다면, constructor을 작성하지 않아도 무방하다.
  e) 아래 코드를 확인해보면 함수의 첫번째 라인은 반드시 super(props)을 호출한다. 미호출시 props가 생성되지 않아 버그가 발생할 수 있다.
  f) constructor은 아무것도 반환해선 안되며, 이곳에서 side effect나 subscription을 실행하면 안된다. 아래 side effect와 subscription이 무엇인지 정의했다. 이것들을 여기서 사용하면 안되는 이유는 정리(clean up)가 필요하기 때문이다. constructor은 컴포넌트가 화면에 붙기 전인데, constructor에서 side effect나 subscription을 사용하면 컴포넌트 흐름이 변경되었을 때 정리 타이밍이 꼬일 수 있다.

  constructor(props) {
    super(props);
    this.state = { counter: 0 };
    this.handleClick = this.handleClick.bind(this);
  }

 

Q. side effect와 subscription을 번역하면 부수효과와 구독이라고 한다. 이게 정확히 어떤 기능일까?

A. React에서 side effect는 컴포넌트가 UI를 렌더하는 것 말고 컴포넌트 밖에 영향을 주거나, 외부 상태를 건드리는 모든 작업을 말한다. 부수효과 예시로 네트워크 요청(fectch), DOM 직접 조작, 타이머(setInterval, setTimeout), 이벤트 리스너 등록 등이 있다.

subscription은 이런 부수효과 중 계속해서 들어오는 이벤트나 데이터를 들어야하는 상태를 의미한다. 이렇게 말하면 subscription이 어떤 것들인지 이해가 잘 안간다. 카카오톡과 같은 메신저들은 사용자가 가만히 있어도 채팅이나 실시간 알람이 오면 서버가 새 메시지를 수시로 보내준다. 사용자가 가만히 있어도 데이터가 들어온 것이다. subscription은 서버가 보내는 메시지 이벤트를 계속 들었다가 새 메시지가 오면 화면을 업데이트한다. 아주 대표적인 subscription의 예시이다. 이렇듯 구독은 한 번 실행하고 끝이 아닌 등록해두면 계속 호출되는 것을 말한다. 그래서 subscription은 계속 호출되기 때문에 반드시 나중에 해제(unsubscribe/cleanup)가 필요하다.

 

 

- constructor

Component – React

 

 

• render( )
  a) 미리 구현된 HTML을 화면상에 그려지는 과정을 수행하는 함수를 의미한다.
  b) React는 render를 언제든지 호출할 수 있으므로 특정 시간에 실행된다고 가정하면 안된다. 그리고 어떤 매개변수도 받지 않는다.
  c) render( )안에서 state 변경(setState)을 금지한다. 그 이유는 무한 루프의 위험이 있기 때문이다.
  d) render 메서드는 순수 함수로 작성해야 한다. 즉, props, state 및 context가 동일한 경우 동일한 결과를 반환해야한다.
  e) side effect 혹은 subscription을 포함하거나 브라우저 API와 상호작용하면 안된다.
  f) 업데이트의 render와 동일한 함수이다.

import { Component } from 'react';

class Greeting extends Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

 

 

- render

Component – React

 

 

• componentDidMount( )
  a) 화면이 렌더링 된 이후에 해당 컴포넌트를 DOM 트리에 삽입(마운트)이 되면 발생하는 메서드를 의미한다.
  b) 자바스크립트 라이브러리 또는 프레임워크의 함수를 호출하거나 이벤트 등록에 사용된다.
  c) setTimeout, setInterval, 네트워크 요청 같은 비동기 작업을 처리할 때 사용된다.
  d) 즉, 데이터를 가져오기를 시작하거나 혹은 구독을 설정하거나 혹은 DOM 노드를 조작할 수 있다.
  e) componentDidMount를 구현하면 일반적으로 버그를 방지하기 위해 다른 생명주기 메서드를 구현한다.
  f) componentDidMount가 일부 state나 props를 읽는 경우 변경 사항을 처리하기 위해 componentDidUpdate를 구현하고 componentDidMount가 수행하던 작업을 정리하기 위해 componentWillUnmount도 구현한다.
  g) componentDidMount는 매개변수를 사용하지 않는다. 그리고 아무것도 반환하지 않아야 한다.
  h) setState를 즉시 호출할 수 있지만, 종종 성능 문제를 발생시키므로 주의하여 사용해야한다.
  
  

class ChatRoom extends Component {
  state = {
    serverUrl: 'https://localhost:1234'
  };

  componentDidMount() {
    this.setupConnection();
  }

  // 업데이트를 하는 경우 이 메서드가 호출된다.
  componentDidUpdate(prevProps, prevState) {
    if (
      this.props.roomId !== prevProps.roomId ||
      this.state.serverUrl !== prevState.serverUrl
    ) {
      this.destroyConnection();
      this.setupConnection();
    }
  }


  // 화면에서 제거(마운트 해제)되기 전에 이 메서드를 호출한다.
  componentWillUnmount() {
    this.destroyConnection();
  }

}

 

★ 여기서 중요한 사실 

• 실제로 프로젝트를 진행하면서 다른 개발자분들의 코드를 살펴보면 componentDidMount, componentDidupdate, componentWillUnmount 코드를 사용한 것을 거의 본 적이 없었다. 대부분 useEffect, cleanup 코드를 사용하고 있었다.
• componentDidMount, componentDidUpdate 및 componentWillUnmount를 클래스 컴포넌트에 함께 정의하는 것은 함수 컴포넌트에서 useEffect를 호출하는 것과 같기 때문에 요새 대부분은 useEffect로 작성하여 위의 코드들은 보기 어려웠다. 이 말은 아까 맨 위에 작성했던, '함수형 + 훅을 널리 사용한다.'와 같은 말이다.

 

- componentdidmount

Component – React

 

 

 

 

[Updating - 업데이트]

• componentDidUpdate( )
  a) 컴포넌트 내에서 변화가 발생된 이후 호출되는 메서드를 의미한다.
  b) 컴포넌트가 업데이트된 props 또는 state로 다시 렌더링된 직후 React가 이 메서드를 호출한다.
  c) 현재 props를 이전 props와 비교하는 한 네트워크 요청을 수행하기도 한다.
  d) 업데이트 후 DOM을 조작하는데 사용할 수 있다.
  e) 매개변수로 prevProps(업데이트 이전의 props), prevState(업데이트 전 state), snapshot(getSnapshotBeforeUpdate를 구현한 경우, snapshot에는 해당 메서드에서 반환한 값을 포함함)을 가진다.
  f) 이 메서드는 아무것도 반환하지 않는다.
  g) setState를 즉시 호출할 수 있지만, 종종 성능 문제를 발생시키므로 주의하여 사용해야한다.
  
  

  componentDidUpdate(prevProps, prevState) {
    if (
      this.props.roomId !== prevProps.roomId ||
      this.state.serverUrl !== prevState.serverUrl
    ) {
      this.destroyConnection();
      this.setupConnection();
    }
  }

 

 

- componentdidupdate

Component – React

 

 

 

[Unmounting - 제거]

• componentWillUnmount( )
  a) 컴포넌트가 DOM에서 제거되기 직전에 호출되는 메서드이다.
  b) 컴포넌트에서 사용 중인 리소스를 해제하거나 구독을 취소하는 경우 수행된다.
  c) 타이머를 해제하는 경우 수행되고 네트워크 요청을 취소하는 등의 클린업 작업을 하는 겨우 수행된다.
  d) componentDidMount가 구독을 설정하면 componentWillUnmount는 해당 구독을 정리해야한다.
  e) componentWillUnmount의 정리 로직이 일부 props나 state를 읽는 경우, 일반적으로 이전 props나 state에 해당하는 리소스를 정리하기 위해 componentDidUpdate도 구현해야한다.
  f) 어떤 매개변수도 받지 않으며, 어떤 값도 반환하지 않는다.

  componentWillUnmount() {
    this.destroyConnection();
  }

 

 

- componentwillunmount

Component – React

 

---

 

4. 함수형 컴포넌트와 Hook

 

• 함수형 컴포넌트는 화면을 만드는 함수이다.
• Hook은 함수형 컴포넌트 안에서 상태/부수효과 같은 React 기능을 쓰게 해주는 특수한 함수이다.
• 대표적인 Hook의 종류
  a) useState : 상태
  b) useEffect : 부수효과/구독/정리
  c) useRef : DOM 참조/값 보관
  d) useMemo, useCallback : 성능최적화
  e) useContext : 전역처럼 공유되는 값 읽기
  f) useReducer : 복잡한 상태 로직

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      {count}
    </button>
  );
}

코드를 보고 직관적으로 이해해보자. 여기서 함수형 컴포넌트는 Counter가 된다. 훅은 useState가 된다. 해당 코드의 움직임은 버튼을 클릭시, 상태가 바뀐다. 그러면 React가 Counter()를 다시 호출해서 UI를 다시 그린다.

함수형 컴포넌트의 라이프 사이클은 컴포넌트가 등장(Mount) → 변경(Update) → 제거(Unmount)의 흐름을 갖는다. 그러면 훅의 라이프 사이클은 어떨까? 훅은 함수형 컴포넌트의 라이프 사이클 속에서 훅이 언제 실행되고 언제 정리(cleanup)되는지가 중요해서 클래스형 컴포넌트와 함수형 컴포넌트처럼 라이프 사이클을 가지고 있다고 보긴 어려울 듯 하다. 그 중 라이프 사이클이 있다고 보기 가장 좋은 훅은 useEffect이다. 함수형 컴포넌트는 렌더 중심으로 돌아가면 useEffect는 렌더가 화면에 반영된 뒤에 붙는데 후처리 장치로 생각하면 된다.

 

Q. Counter가 함수형 컴포넌트인 이유는?

A. 함수형 컴포넌트는 UI를 반환하는 함수라서 return에 <div>...</div>와 같은 코드가 있다. 위의 코드는 <button>...</button>을 적었다. 이렇게 생긴 경우 대부분 함수형 컴포넌트라고 보면 된다. 그리고 이름이 대문자로 시작해야한다. 소문자로 시작할 경우 JSX가 HTML 태그처럼 오해할 수 있다. 특히 위의 코드처럼 훅을 사용하면서 JSX를 리턴하는 경우 거의 함수형 컴포넌트라고 볼 수 있다.

 

 

 

 

---

 

 

 

 

5. 클래스형 컴포넌트 VS 함수형 컴포넌트와 Hook

• 클래스형 컴포넌트 코드

import React from "react";

// 구조가 다른 걸 확인할 수 있다.
// 함수형은 function Counter로 썼다.
// 리액트가 Counter의 인스턴스를 만들고 그 객체를 계속 들고있다.
class Counter extends React.Component {
  state = {
    count: 0,
  };

  handleClick = () => {
    this.setState((prevState) => ({
      count: prevState.count + 1,
    }));
  };

  // 클래스형은 반드시 render() 메서드 안에서 return을 써야한다.
  // 함수형은 return이 곧 렌더 결과이다.
  render() {
    return (
      <button onClick={this.handleClick}
        // 접근할 때 this.state.count로 해야한다.
        // 함수형은 this 없이 그냥 count, setCount 변수로 사용한다.
        {this.state.count}
      </button>
    );
  }
}

export default Counter;

 

 

• 함수형 컴포넌트 + 훅

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      {count}
    </button>
  );
}