React 컴포넌트의 생명 주기 개념 정리하기

리액트 컴포넌트의 생명주기에는 클래스형 생명주기와 함수형 생명주기가 있다.

부캠을 시작하기 전에 코딩애플에서 미리 리액트 강의를 볼 때는 그냥 함수형 생명주기만 배워서 클래스형 컴포넌트는 존재 자체를 모르고 있었는데 OZ코딩 스쿨에서 클래스형과 함수형을 동시에 배웠다. 그래서 정리해 보려고 한다.

 

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

클래스형 컴포넌트의 생명주기(Lifecycle)는 React에서 컴포넌트가 마운트 되고 업데이트되며 언마운트될 때 발생하는 여러 단계를 말한다.

 

1. 마운트(Mounting) 단계

• constructor(): 컴포넌트가 생성될 때 호출되며 초기 설정을 수행한다.
• static getDerivedStateFromProps(): props에 의존적인 state를 설정할 때 사용된다.
• render(): 컴포넌트를 렌더링 한다.
• componentDidMount(): 컴포넌트가 실제 DOM에 삽입된 후 호출된다. 데이터 로딩 등의 초기화 작업에 유용하다.

2. 업데이트(Updating) 단계

• static getDerivedStateFromProps(): props가 변경될 때 호출되며 state를 업데이트하는 데 사용된다.
• shouldComponentUpdate(): 컴포넌트가 리렌더링 해야 할지를 결정한다. 성능 최적화에 유용하게 사용된다.
• render(): 업데이트된 컴포넌트를 다시 렌더링 한다.
• getSnapshotBeforeUpdate(): 업데이트 전에 DOM 상태를 기반으로 한 값(ex. 스크롤 위치)을 얻을 수 있다.
• componentDidUpdate(): 컴포넌트가 업데이트된 후에 호출된다. 업데이트 후의 작업을 처리할 수 있다.

언마운트(Unmounting) 단계

• componentWillUnmount(): 컴포넌트가 DOM에서 제거되기 직전에 호출된다. 리소스 정리 등의 작업을 수행할 수 있다.

4. 오류 처리(Error Handling)

• static getDerivedStateFromError(): 자식 컴포넌트 렌더링 중 에러가 발생했을 때 호출되며, 상태를 업데이트하여 에러 UI를 표시하는 데 사용된다.
• componentDidCatch(): 자식 컴포넌트에서 에러가 발생했을 때 호출되며, 에러 로그를 기록하거나 오류 경계를 설정할 수 있다.

나는 constructor, render componentDidMount, componentDidUpdate, componentWillUnmount만 배운 것 같은데 GPT에 검색해 보니 뭔가 더 있긴 하네.. 내가 강의를 제대로 안 본 건가 싶다.

 

강의에서 배운 클래스형 컴포넌트 생명주기의 실행 시점에 대한 표를 한눈에 볼 수 있게 작성해 봤다.

구분	실행되는 시점
componentDidMount()	컴포넌트가 마운트 됐을 때 실행
componentDidUpdate()	컴포넌트가 업데이트 됐을 때 실행
componentWillUnmount()	컴포넌트가 없어지기 전에 실행

 

함수형 컴포넌트 생명주기

 

함수형 컴포넌트에서 생명주기와 관련된 개념은 주로 효과적인 함수 (Effect Hook) 인 useEffect를 통해 처리된다. 함수형 컴포넌트는 React Hooks의 도입으로 생명주기 메서드를 대체하고, 상태 관리와 생명주기 관리를 효과적으로 할 수 있게 됐다.

 

useEffect Hook은 함수형 컴포넌트에서 부수 효과를 수행하도록 도와주는 메커니즘이다. 이를 통해 컴포넌트가 렌더링 될 때나 업데이트될 때 특정 작업을 수행할 수 있다. useEffect Hook은 클래스형 컴포넌트의 componentDidMount, componentDidUpdate, componentWillUnmount와 비슷한 역할을 한다.

 

  useEffect(() => {
    console.log('맨 처음 렌더링 될 때에만 실행');
  }, []);

 

 

useEffect에 빈 배열이 추가되면 화면이 처음에 로드될 때에만 실행된다.

 

  useEffect(() => {
    console.log('리렌더링');
  })

빈 배열조차 없는 상태에서는 어떠한 컴포넌트가 상태변화가 일어나면 무조건 실행된다.

 

  useEffect(() => {
    console.log('상태1 값이 변할 때')
  }, [상태1]);
  
  useEffect(() => {
    console.log('상태2 값이 변할 때')
  }, [상태2]);
  
  useEffect(() => {
    console.log('상태1 또는 상태2 값이 변할 때')
  }, [상태1, 상태2]);

특정 상태값이 변할 때만 실행된다.

 

useEffect(() => {
    return () => {
      console.log('컴포넌트 언마운트');
    }
  }, []);

컴포넌트가 최종적으로 언마운트 될 때(사라질 때) 실행된다.

 

클래스형 컴포넌트와 함수형 컴포넌트를 비교해 봤을 때 왜 요즘은 클래스형 컴포넌트를 쓰지 않는지 알겠다.

생명주기만 봐도 클래스형 컴포넌트에 비해 함수형 컴포넌트가 가독성도 좋고 코드도 짧아서 보기도 사용하기도 편한 것 같다.

 

React 생명주기 함수의 필요성

음.. 이걸 보는 순간 그냥 사용하기 편리하게끔 만들어 둔 것 아닌가?라는 단순한 생각을 했는데 꽤나 이유가 많다.

 

리액트 생명주기 함수(라이프사이클 메서드)는 컴포넌트의 여러 상태 변화에 따라 특정 시점에 호출되는 함수들을 말한다. 이들 생명주기 함수는 컴포넌트가 마운트, 업데이트, 언마운트되는 과정에서 필요한 작업을 수행할 수 있도록 도와준다. 이들의 필요성은 여러 가지 측면에서 설명할 수 있다.

 

• 초기화 및 데이터 로딩: componentDidMount 메서드는 컴포넌트가 DOM에 마운트 된 후 한 번 호출된다. 이때 초기 데이터를 로드하거나 외부 데이터와의 연동을 할 수 있다. 초기화 작업이 필요한 경우 여기에서 수행한다.
• 업데이트 관리: componentDidUpdate 메서드는 컴포넌트의 상태나 props가 변경되어 업데이트가 발생한 후에 호출된다. 이를 이용해 데이터의 변경에 따른 추가적인 작업을 수행할 수 있다. 예를 들어, 이전 상태와 현재 상태를 비교하여 필요한 DOM 조작을 수행할 수 있다.
• 리소스 정리: componentWillUnmount 메서드는 컴포넌트가 DOM에서 제거되기 전에 호출된다. 이 메서드에서는 리소스를 정리하거나 사용 중인 리스너나 타이머를 제거하는 등의 작업을 수행할 수 있다. 메모리 누수를 방지하고 자원 관리를 위해 필수적이다.
• 오류 처리: componentDidCatch 메서드는 자식 컴포넌트에서 에러가 발생했을 때 호출된다. 이를 이용해 전역적으로 에러를 처리하거나 에러 경계를 설정할 수 있다. 이는 사용자 경험을 개선하고 애플리케이션의 안정성을 높이는 데 중요다.

그냥 있으니까 쓰나 보다라고 생각하고 사용하면서 이게 왜 있을까라는 이유를 생각해 본 적은 딱히 없었는데 한번 되짚고 넘어갈 수 있는 시간인 거 같아서 좋은 것 같다.