[React] 컴포넌트의 라이프사이클 (Lifecycle)

리액트의 모든 컴포넌트는 생명 주기를 갖는다. 이는 크게 마운트(생성) > 업데이트 > 언마운트(제거)의 세 단계로 구분하는데, 함수형 컴포넌트에서는 useEffect를 사용, 클래스형 컴포넌트에서는 생명 주기 메서드를 사용하여 생명 주기에 맞춘 코드를 작성할 수 있다.

 

 

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

 

1. 마운트 시 호출되는 메서드

• constructor:  컴포넌트가 마운트 되기 전에 호출된다. this.state에 객체를 할당하여 state를 초기화하고, 인스턴스에 이벤트 처리 메서드를 바인딩한다.
• getDerivedStateFromProps:  컴포넌트가 최초 마운트될 때와 업데이트될 때 호출된다. state를 갱신하기 위한 객체를 반환하거나, null을 반환하여 아무것도 갱신하지 않을 수 있다. props가 변경되었을 때 state도 업데이트하는 용도로 사용한다. (props가 변경되었을 때 부수 효과를 발생하거나 일부 데이터를 다시 계산하거나 일부 state를 변경하는 용도에는 다른 방식을 사용하는 것이 권장된다.)
• render:  컴포넌트를 렌더링한다. 클래스 컴포넌트에서 반드시 구현되어야 하는 메서드이다. render() 함수는 컴포넌트의 state를 변경하지 않고, 호출될 때마다 동일한 결과를 반환해야 하며, 브라우저와 직접적으로 상호작용하지 않아야 한다.
• componentDidMount:  컴포넌트가 마운트 된 직후 호출된다. 외부에서 데이터를 불러와야 할 때, 네트워크 요청을 보내기 적절한 위치이다. 이 메서드에 데이터 구독을 설정한다면 componentWillUnmount()에서 구독 해제 작업을 해야 한다. 

 

2. 업데이트 시 호출되는 메서드

• getDerivedStateFromProps: (위와 동일)
• shouldComponentUpdate:  props 또는 state가 변경되었을 때 컴포넌트의 리렌더링 여부를 결정한다. 기본적으로 state 변경 시에 리렌더링 되도록 동작하므로, 특정 state가 변경되었을 때 false를 반환하는 것으로 리렌더링 작업을 건너뛰게 만들 수 있다. 이 메서드는 오직 성능 최적화만을 위한 것으로 렌더링을 방지하는 목적으로 사용할 경우 버그로 이어질 수 있다.
• render: (위와 동일)
• getSnapshotBeforeUpdate:  컴포넌트가 마지막으로 렌더링 된 결과가 DOM에 반영되기 전에 호출된다. 컴포넌트가 업데이트되기 직전에 스크롤 위치 등과 같은 정보를 얻을 수 있다. 이 메서드가 반환하는 값은 componentDidUpdate에 세 번째 인자로 전달된다.
• componentDidUpdate:  컴포넌트가 업데이트가 된 직후에 호출된다. 최초 렌더링에서는 호출되지 않는다. 이전과 현재의 props를 비교하여 네트워크 요청을 보내는 작업에 사용한다. 이 메서드에서 setState()를 호출할 때 조건문으로 감싸지 않으면 무한 반복이 발생할 수 있다.

 

3. 언마운트 시 호출되는 메서드

• componentWillUnmount:  컴포넌트가 DOM 상에서 제거될 때 호출된다. 타이머 제거, 네트워크 요청 취소, 데이터 구독 해제 등 모든 정리 작업을 수행한다. 이제 컴포넌트가 다시 렌더링 되지 않으므로 setState()를 호출하면 안 된다.

 

 

 

함수형 컴포넌트 생명 주기 관리

 

1. 컴포넌트가 마운트 될 때

useEffect(() => {
    // 컴포넌트가 마운트될 때 실행될 작업을 작성
  }, [])

useEffect 훅은 컴포넌트가 렌더링 될 때마다 실행되는 훅이다. 두 번째 인자로 빈 배열을 전달하면 컴포넌트가 마운트 될 때만 useEffect가 실행되도록 할 수 있다.

 

2. 컴포넌트가 업데이트될 때

useEffect(() => {
    // 컴포넌트가 업데이트될 때 실행될 작업을 작성
  }, [props]);

props가 변경되면 컴포넌트가 업데이트되므로 의존성 배열에 props를 넣어준다. useState 변수를 넣어서도 사용 가능하다.

 

3. 컴포넌트가 언마운트 될 때

useEffect(() => {
    return () => {
      // 컴포넌트가 언마운트될 때 실행될 작업을 작성
    };
  }, []);

 useEffect 내부에 return문을 작성하면 컴포넌트가 언마운트 될 때 실행한다.