React의 Life Cycle
포스트
취소

React의 Life Cycle

개요

라이프사이클, 즉 생명주기라는 단어는 Vue나 React와 같은 프론트엔드 개발 도구를 사용해본 경험이 있다면 누구나 한 번 쯤 들어봤을 단어입니다.
그만큼 해당 개발 도구를 사용하는데 중요한 역할을 하며, 이 부분을 잘 알고 있어야 좋은 서비스를 개발할 수 있습니다.

Lifecycle

Vue나 React는 컴포넌트 단위로 아주 작게 기능들을 쪼개서 개발을 하는데, 컴포넌트가 생겨나면서 사라지기까지의 모든 과정을 Lifecycle이라고 합니다.

React

React의 생명주기의 경우 세 단계로 구분 됩니다.

Mount

컴포넌트가 렌더링 된 단계를 Mount라고 합니다.

클래스 컴포넌트

1
2
3
4
5
class Component {
  componentDidMount() {
    // 로직
  }
}

클래스 컴포넌트의 경우, componentDidMount라는 메소드로 해당 단계에 실행할 로직을 작성합니다.

함수형 컴포넌트

1
2
3
useEffect(() => {

}, []);

함수형 컴포넌트의 경우, useEffect 함수를 이용합니다.
두번째 매개변수로 []를 전달하여, 해당 컴포넌트가 탄생하는 순간에만 실행하도록 구현합니다.

Update

컴포넌트가 렌더링 된 이후, stateprops 등의 변경으로 인하여 새로 컴포넌트를 렌더링 하는 단계를 Update라고 합니다.

클래스 컴포넌트

1
2
3
4
5
class Component {
  componentDidUpdate() {
    // 로직
  }
}

컴포넌트가 갱신 될 때 실행할 로직을 componentDidUpdate에 작성합니다.

Unmount

컴포넌트가 완전히 소멸하는 단계를 Unmount라고 합니다.

클래스 컴포넌트

1
2
3
4
5
class Component {
  componentWillUnmount() {

  }
}

클래스 컴포넌트는 해당 단계에 실행할 로직을 componentWillUnmount라는 메소드에 작성합니다.

함수형 컴포넌트

1
2
3
4
5
6
useEffect(() => {
  // 로직
  return () => {
    // Unmount 때 실행할 로직
  };
}, []);

기본적으로 함수의 형태는 Mount 단계와 동일하지만, Unmount 때 실행할 로직을 담은 함수를 return한다는 점에서 차이가 생깁니다.

이 기사는 저작권자의 CC BY 4.0 라이센스를 따릅니다.

[React Native] APK와 AAB

SEO 친화적인 인피니티 스크롤