[React] LifeCycle과 LifeCycle 메서드

---

 

 

📑 개요

이 개념도 Vue를 배울 때 처음 익혔던 거 같다.

이것 또한 Virtual DOM 처럼 왜.......? 필요한데.......? 했던... 개념......

아마 함수형을 많이 쓰므로 Hook을 더 많이 쓰게 될테니 스윽 읽어보고 알아두자.

 

 

 

 

---

 

 

 

 

라이프사이클(LifeCycle)이란?

리액트 컴포넌트의 생명주기로, 컴포넌트가 브라우저 상에서 실행, 업데이트, 제거될 때 특정한 이벤트가 발생하는 것이다.

리액트의 라이프사이클은 클래스형 컴포넌트에서만 사용되며

함수형 컴포넌트의 경우 React Hook 중 하나인 useEffect를 통해 유사한 작업을 할 수 있다.

 

 

참고 포스팅

클래스형 컴포넌트와 함수형 컴포넌트

 

 

 

- 컴포넌트의 생명주기

생성 (Mounting) -> 업데이트 (Updating) -> 제거 (Unmounting)

 

 

 

 

 

 

Class Component의 생명주기

 

- 마운트 (Mount)

컴포넌트가 처음 실행되어 DOM에 생성될 때 단계이다.

아래의 순서대로 호출된다.

• constructor()
• static getDerivedStateFromProps()
• render()
• componentDidMount()

 

 

constructor()

컴포넌트의 생성자 메서드다. 컴포넌트가 생성될 때 가장 먼저 실행되며 한 번만 호출된다.

state와 props에 접근하여 값을 할당할 수 있다.

class ExampleComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
    console.log('Constructor called');
  }
  
  render() {
    return <div>Example Component</div>;
  }
}

 

 

 

static getDerivedStateFromProps()

컴포넌트가 생성될 때와 props가 변경될 때마다 호출된다.

getDerivedStateFromProps()는 앞에 static을 필요로 하며, 이 안에서 this의 조회는 불가능하다.

props로 받아온 것을 state에 설정하고 싶을 때 사용되며 null을 반환하게 되면 아무 것도 갱신이 되지 않는다.

 

컴포넌트가 처음 렌더링 되기 전에 호출 되며, 리렌더링 되기 전에도 매번 실행된다.

  static getDerivedStateFromProps(props, state) {
    console.log('getDerivedStateFromProps called');
    // 변경된 props로부터 상태를 갱신
    return { count: props.initialCount };
  }

 

 

 

 

render()

컴포넌트를 렌더링해준다.

반드시 구현되어야 하는 메서드로 렌더링할 JSX를 반환한다.

render()

 

 

 

componentDidMount()

컴포넌트가 DOM에 추가되고 렌더링이 완료된 직후 호출된다.

render 이전에는 DOM에 접근할 수 없지만 render 이후 이 작업에서는 DOM 접근이 가능하다.

따라서, DOM을 사용해야 할 수 있는 외부 라이브러리 연동이나

데이터를 요청하기 위해 axios, fetch 등을 이용해 AJAX 요청을 하거나

DOM의 속성을 읽거나 변경하는 작업을 처리한다.

componentDidMount()

 

 

 

 

 

- 업데이트 (Update)

업데이트가 일어나는 경우

1. Props의 변경
2. State의 변경
3. forceUpdate()의 실행
4. 부모 컴포넌트가 렌더링 됐을 때 (자식 컴포넌트도 리렌더링 된다)

 

위의 상황에서 업데이트가 일어날 때 아래의 메서드가 순서대로 호출된다.

• static getDerivedStateFromProps()
• shoudComponentUpdate()
• render()
• getSnapshotBeforeUpdate()
• componentDidUpdate()

 

 

 

static getDerivedStateFromProps()

마운트에서 일어나는 메서드와 동일하며 업데이트 될 때도 이 메서드가 호출된다.

 

 

 

shoudComponentUpdate()

컴포넌트의 리렌더링 여부를 결정하는 메서드로 성능 최적화를 위해 사용된다.

props나 state가 새로운 값으로 갱신되고 렌더링이 발생하기 직전에 호출되며 기본값은 true이다.

이 단계는 아직 render가 되기 전이므로 return false를 통해 render를 취소할 수도 있다.

useMemo와 유사한 역할을 한다.

shouldComponentUpdate(nextProps, nextState) {
    console.log('shouldComponentUpdate called');
    // 업데이트 여부 결정 로직
    return true; // 항상 업데이트를 허용
  }

 

 

 

 

render()

마운트에서 설명한 것과 동일하다.

 

 

 

getSnapshotBeforeUpdate()

컴포넌트가 업데이트된 결과가 DOM에 반영되기 전에 호출되며 이전 상태를 캡처하여 사용할 수 있다.

DOM 상태가 변경 되기 전 DOM 상태를 가져와서 특정 값을 반환하면 그 다음 발생하는 componentDidUpdate() 함수에서 인자로 받아와 사용할 수 있다.

함수형 컴포넌트와 Hooks를 사용 할 때는 이 메서드를 대체할 수 있는 기능이 아직 없다.

 getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log('getSnapshotBeforeUpdate called');
    // 스크롤 위치나 다른 DOM 상태를 캡처하여 사용할 수 있음
    return null;
  }

 

 

 

 

componentDidUpdate()

컴포넌트가 업데이트 된 이후 호출된다.

3번째 파라미터를 사용해 getSnapshopBeforeUpdate()에서 반환한 값을 조회할 수 있다.

이전 props나 state에 접근하여 업데이트 이후의 작업을 수행하며 네트워크 요청, 상태 업데이트, 외부 라이브러리와의 통합 등의 작업에 사용된다.

componentDidUpdate(prevProps, prevState, snapshot) {
    console.log('componentDidUpdate called');
    // 업데이트 이후 작업 수행
  }

 

 

 

 

- 언마운트 (Unmount)

컴포넌트가 DOM에서 제거되어 화면에서 사라진다.

이 단계에서 사용되는 생명주기 메서드는 하나이다.

• componentWillUnmount()

 

 

componentWillUnmount()

컴포넌트가 제거되기 직전에 호출된다.

주로 DOM에 직접 등록한 이벤트를 제거하는 용도로 쓰인다.

componentWillUnmount()

 

 

 

 

---

 

 

 

✨ 마무리

본래는 React Hook까지 하려했는데 생각보다 길어져서...

React Hook은 다시 포스팅 해야겠다.

처음 개념을 접했을 때보다 어느 정도 개발에 익숙해지고 나서

다시 이 개념을 접하니 음~ 그런 거였구나 하고 추상적이던 게 정리되는 기분.

 

 

- 요약

• LifeCycle
  리액트 컴포넌트의 생명주기로, 컴포넌트가 브라우저 상에서 실행, 업데이트, 제거될 때 특정한 이벤트가 발생하는 것
• 컴포넌트의 생명주기
  생성 (Mounting) -> 업데이트 (Updating) -> 제거 (Unmounting)
  
• 마운트 (Mount)
  컴포넌트가 처음 실행되어 DOM에 생성될 때 단계
  
  • constructor()
  • static getDerivedStateFromProps()
  • render()
  • componentDidMount()
• 업데이트 (Update)
  props나 state가 바뀔 때, forceUpdete()가 일어날 때, 부모 컴포넌트가 렌더링 될 때 생기는 단계
  
  • static getDerivedStateFromProps()
  • shoudComponentUpdate()
  • render()
  • getSnapshotBeforeUpdate()
  • componentDidUpdate()
• 언마운트 (Unmount)
  컴포넌트가 DOM에서 제거되어 화면에서 사라지는 단계
  
  • componentWillUnmount()