리액트 라이프 사이클

주원·2023년 12월 14일

React

목록 보기

2/5

💡 요약

클래스 컴포넌트에서만 적용되며 함수 컴포넌트에서는 훅(Hook)을 사용하여 상태와 라이프 사이클을 관리

함수형 컴포넌트 사용 지향 하지만

클래스형 컴포넌트 이해가 되면 더욱 함수형 컴포넌트 훅을 이해하는데에 도움

공부하게 된 이유

React를 통해 프로젝트를 하면서 hook을 많이 사용했다.
그러다 라이프 사이클과 연관지어서 hook을 이해해보고자 했지만, 이해가 잘 되지않아 좀 더 자세히 알아보고자 공부를 해보았다.

라이프 사이클이란?

리액트 라이프사이클은 컴포넌트가 생성부터 소멸까지의 여러 단계에서 일어나는 메서드들의 집합을 의미
이 메서드들은 컴포넌트의 상태 변화, UI 업데이트, 외부 데이터 가져오기 등을 관리하는 데 사용
그러나 리액트 16.3 버전부터 라이프사이클 개념이 변경되었고, 클래스 컴포넌트에서만 적용되며 함수 컴포넌트에서는 훅(Hook)을 사용하여 상태와 라이프사이클을 관리

클래스

라이프 사이클은 생성, 업데잍이트 제거 총 세 가지 단계로 나눌 수 있음
각 단계마다 메서드 존재
9가지의 메서드가 있음

→ 헷갈리면

처음 생성 될 때
state나 props가 업데이트 될 때
컴포넌트가 브라우저에 보여질 필요가 없을 때

로 크게 구분하여 이해

마운트 (생성)

constructor : 컴포넌트가 만들어지면 가장 먼저 실행되는 메서드
getDerivedStateFromProps : props로 받아온 것을 state에 넣을 때 사용하는 메서드이며, 컴포넌트가 처음 렌더링 되기 전에 호출되며 리렌더링 전에도 항상 실행
```
static getDerivedStateFromProps(props, state)
```
render : 컴포넌트를 렌더링 하는 메서드

componentDidMount : 컴포넌트의 첫 렌더링을 마친 후 호출되는 메서드, 이 매소드가 호출되는 시점에서는 이미 컴포넌트가 화면에 출력된 상태. 이 단계에선 axios fetch 등을 사용해 해당 컴포넌트에서 필요하는 데이터를 요청하는 등의 작업을 진행. setTimeout과 같이 화면에 출력된 뒤에도 실행되는 상태

class MountingExample extends Component {
  constructor(props) {
    super(props);
    this.state = {
      message: 'Component is mounting...',
    };
  }

  componentDidMount() {
    setTimeout(() => {
      this.setState({
        message: 'Component has mounted!',
      });
    }, 2000); // 2초 후에 메시지 업데이트
  }

  render() {
    return (
      <div>
        <p>{this.state.message}</p>
      </div>
    );
  }
}

정답 componentDidMount() 메서드는 클래스형 컴포넌트에서 컴포넌트가 마운트된 후에 실행되는 메서드로 setTimeout은 업데이트 할 때라고 보면 됨

업데이트 (갱신)

getDerivedStateFromProps : 마운트 단계와 동일하며. 컴포넌트의 props나 state가 변경됐을 때도 호출 되는 메서드
shouldComponentUpdate : 컴포넌트의 리렌더링 여부를 결정하는 메서드로, React.memo와 역할이 비슷함
render : 컴포넌트를 렌더링 하는 메서드
getSnapshotBeforeUpdate : render에서 만들어진 결과가 브라우저에 실제 반영되기 직전에 호출되는 메서드. 컴포넌트에 변화가 일어나기 직전의 DOM 상태를 가져와서 특정 값을 반환하면 그 다음 발생하게되는 componentDidUpdate 메서드에서 받아와 사용할 수 있음. 하나의 예시로 페이지에 새로운 내용이 추가됐을 때 사용자의 스크롤 위치를 새로운 내용이 아닌 기존 위치로 유지하기 위해 사용 할 수 있음. 참고로 함수형 컴포넌트 개발 시 훅을 사용하여 getSnapshotBeforeUpdate 메소드를 대체할 수 없다. 비슷한 역할을 하는 것은 있음.
componentDidUpdate : 리렌더링을 마친 후 브라우저에 모든 변화가 나타난 후 호출되는 메서드. 세 번째 파라미터로 getSnapShotBeforeUpdate에서 반환한 값을 불러올 수 있다.

getSnapshotBeforeUpdate VS useEffect

import React, { Component } from 'react';

class ScrollDemo extends Component {
  constructor(props) {
    super(props);
    this.listRef = React.createRef();
    this.state = {
      items: [],
    };
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevState.items.length < this.state.items.length) {
      const snapshot = this.listRef.current.scrollHeight;
      this.listRef.current.scrollTop += this.listRef.current.scrollHeight - snapshot;
    }
  }

  addItem = () => {
    this.setState(prevState => ({
      items: [...prevState.items, prevState.items.length + 1],
    }));
  };

  render() {
    return (
      <div>
        <button onClick={this.addItem}>Add Item</button>
        <ul
          ref={this.listRef}
          style={{ height: '200px', overflow: 'auto', border: '1px solid black' }}
        >
          {this.state.items.map(item => (
            <li key={item}>{item}</li>
          ))}
        </ul>
      </div>
    );
  }
}

export default ScrollDemo;

addItem(새 항목) 항목이 추가되었을 경우, 스크롤 위치를 조정하여 새로운 항목이 보이도록 함

import React, { useState, useEffect, useRef } from 'react';

function ScrollDemo() {
  const [items, setItems] = useState([]);
  const listRef = useRef();

  useEffect(() => {
    if (listRef.current) {
      listRef.current.scrollTop = listRef.current.scrollHeight;
    }
  }, [items]);

  const addItem = () => {
    setItems(prevItems => [...prevItems, items.length + 1]);
  };

  return (
    <div>
      <button onClick={addItem}>Add Item</button>
      <ul ref={listRef} style={{ height: '200px', overflow: 'auto', border: '1px solid black' }}>
        {items.map(item => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default ScrollDemo;

사용 예시

언마운트 (제거)

componentWillUnmount : 컴포넌트가 사라지기 직전에 호출을 하고, 주로 여기서는 DOM에 등록했었던 이벤트들을 제거해주는 용도로 사용

ex) setInterval 헤제 등

함수형 컴포넌트

함수형 컴포넌트는 React 라이브러리에서 UI를 구축하기 위해 사용되는 컴포넌트 유형 중 하나
클래스형 컴포넌트와 비교하여 상대적으로 간결하고 간단한 구조를 가지며, 최근 React 버전에서는 주로 함수형 컴포넌트와 훅(Hook)을 사용하는 추세
함수형 컴포넌트는 주로 useState, useEffect, useContext 등의 훅을 사용하여 상태와 부작용을 관리
라이프사이클 개념은 주로 클래스형 컴포넌트에서 사용되었지만, 함수형 컴포넌트에서도 비슷한 동작을 할 수 있음
class형 컴포넌트 이해가 되면 더욱 함수형 컴포넌트 훅을 이해하는데에 도움
함수형 컴포넌트의 라이프사이클은 훅을 이용하여 다룰 수 있습니다. 주요 훅을 통해 함수형 컴포넌트의 라이프사이클과 비슷한 동작을 수행할 수 있습니다.

useEffect: useEffect 훅은 함수형 컴포넌트에서 라이프사이클의 일부 역할을 수행. 컴포넌트가 마운트될 때, 업데이트될 때, 언마운트될 때 등의 시점에서 특정 작업을 수행 (거의 모든 지점에서 수행) 클래스형 컴포넌트의 componentDidMount, componentDidUpdate, componentWillUnmount와 유사한 역할
useState: useState 훅은 컴포넌트의 상태를 관리하는 역할. 상태 값이 변경될 때마다 컴포넌트는 리렌더링되어 새로운 상태를 반영
useMemo, useCallback: 이 두 훅은 성능 최적화를 위해 사용. useMemo는 계산 비용이 높은 연산의 결과를 캐싱하여 불필요한 재계산을 방지. useCallback은 콜백 함수를 메모이제이션하여 매번 새로운 함수가 생성되는 것을 방지하여 자식 컴포넌트의 불필요한 리렌더링을 막음.
useContext: useContext 훅은 컴포넌트 트리 전체에서 전역적으로 상태나 함수를 사용할 수 있게 해줌. 클래스형 컴포넌트의 Context API와 유사한 역할.