React 생명주기(Life Cycle)

라이프사이클(Life cycle)란?

---

라이프사이클은 컴포넌트가 실행되거나, 업데이트 또는 제거될 때 특정한 이벤트들을 호출하는 것이다.

이러한 리액트의 라이프사이클은 원래 클래스 컴포넌트에서 사용되지만,
함수 컴포넌트에서도 useEffect를 사용하여 비슷하게 작업을 할 수가 있다.

라이프 사이클(Life cycle) 3가지 유형

1. 생성될 때 (마운팅)
2. 업데이트 될 때 (업데이팅)
3. 제거할 때 (언마운팅)

마운트

---

컴포넌트가 처음 실행이 될 때 생성단계를 마운트(Mount)라고 표현을 한다.
마운트에 해당되는 생명주기에는 다음과 같은 메서드들이 있다.

• constructor
• getDerivedStateFromProps
• render
• componentDidMount

constructor()

컴포넌트 생성자 메서드로, 컴포넌트가 생성되면 제일 먼저 실행되는 메서드이다.
state와 props를 접근하여 값을 할당할 수 있다.

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

getDerivedStateFromProps()

props로 받아온 것을 state에 설정하고 싶을 때 사용된다.
최초 마운트 시와 갱신 시, 모두에서 render 메서드를 호출하기 직전에 호출된다.
특정 객체를 반환하면 해당 객체의 값이 state로 갱신되고, null을 반환하면 아무것도 갱신하지 않는다.

static getDerivedStateFromProps(props, state) {
  if (props.count !== state.count) {
    return { count: props.count };
  }
  return null;
}

render()

컴포넌트를 렌더링하는 메서드이다. 클래스 컴포넌트에서 반드시 구현해야 하는 유일하는 메서드이다.

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

함수형 컴포넌트에서는 state나 jsx가 알아서 렌더링 처리해준다.

function MyComponent(props) {
  return <div>{props.count}</div>;
}

componentDidMount()

컴포넌트가 마운트되고 첫 번째 렌더링이 된 직후 호출된다. 이 시점에서는 화면이 구현된 상태이다.
주로 비동기통신을 요청하거나, DOM에 속성을 읽거나 변경하는 작업을 한다. (setTimeou, setInterval 등)

componentDidMount() {
  console.log('구성요소가 마운트되었습니다');
}

업데이트

---

컴포넌트의 업데이트 시에는 다음과 같은 생명주기 메서드들이 호출된다. <br / >

• getDerivedStateFromProps()
• shouldComponentUpdate()
• render()
• getSnapshotBeforeUpdate()
• componentDidUpdate()

getDerivedStateFromProps()

값이 갱신되어 업데이트 시에도 render 전에 실행된다.

shouldComponentUpdate()

컴포넌트를 다시 렌더링할지 결정하는 메서드이다. props 또는 state가 새로운 값으로 갱신되어
렌더링이 발생하기 직전에 호출된다. 기본 값은 true이며, return false를 하면 render를 취소할 수 있다.
주로 성능최적화를 위해 사용된다.

shouldComponentUpdate(nextProps, nextState) {
  return nextProps.value !== this.props.value;
}

render()

컴포넌트를 렌더링한다.

getSnapshotBeforeUpdate()

가장 마지막으로 렌더링된 결과가 DOM 등에 반영되기 전에 호출된다.
이 메서드를 사용하면 DOM상태가 변경되기 전 값을 반환하여 componentDitUpdate에서
인자로 받아 사용할 수 있다.

getSnapshotBeforeUpdate(prevProps, prevState) {
  return { scrollPosition: document.body.scrollHeight };
}

componentDitUpdate()

갱신이 일어난 직후에 호출된다. 이 메서드는 최초 렌더링에서는 호출되지 않는다.

componentDidUpdate(prevProps) {
  if (this.props.userID !== prevProps.userID) {
    this.fetchData(this.props.userID);
  }
}

언마운트

---

언마운트(Unmount)란?, 컴포넌트가 화면에서 제거되는 것을 의미하며, 관련된 생명주기 메서드는
componentWillUnmount 하나가 있다.

componentWillUnmount()

컴포넌트가 사라지기 직전에 호출되며, 주로 DOM에 등록했던 이벤트들을 제거하는 용도로 사용된다.

componentWillUnmount() {
  console.log('Component will unmount!');
}

결론

---

React 컴포넌트의 라이프사이클은 컴포넌트가 생성(Mounting), 업데이트(Updaing), 제거(Unmounting)
되는 과정에서 다양한 메서드를 통해 특정 작업을 수행할 수 있게 해준다.
클래스 컴포넌트에서는 이러한 메서드를 명시적으로 정의하여 사용할 수 있으며,
함수형 컴포넌트에서는 useEffect를 사용하여 비슷한 작업을 처리할 수 있다.

이를 통해 컴포넌트의 동작을 세밀하게 제어하고, 효율적으로 관리할 수 있다.

React 공식문서