리액트 컴포넌트의 라이프사이클

리액트 컴포넌트의 라이프 사이클이란 컴포넌트가 생성되고, 업데이트되고, 제거될 때 일어나는 다양한 메서드 집합이다. 이를 이용하여 컴포넌트의 상태를 변경하거나 외부 API와의 상호작용 등을 처리할 수 있다.

 

함수형 컴포넌트는 React 16.8 이후에 추가된 Hooks를 이용하여 라이프사이클 기능을 사용할 수 있다.

Hooks는 함수형 컴포넌트에서도 상태(state)와 라이프 사이클 메서드를 이용할 수 있도록 도와준다.

 

클래스형 컴포넌트의 생애주기

1. 마운트 (mount) : 컴포넌트가 처음으로 생성될 때 일어나는 과정

constructor : 컴포넌트의 생성자 함수로 초기 상태를 설정한다. 생성자가 호출되면 가장 먼저 실행된다.

getDerivedStateFromProps : props로부터 상태를 동기화 한다.

render : 컴포넌트의 UI를 렌더링 한다.

componentDidMount : 컴포넌트가 마운트 되었을 때 호출한다. 이 메서드에서는 외부 데이터를 가져와서 상태를 업데이트 하거나, DOM을 조작하는 작업 등을 수행할 수 있다.

 

2. 업데이트 (Update) : 컴포넌트가 업데이트될 때 일어나는 과정

getDerivedStateFromProps : props로 부터 상태를 동기화 한다.

shouldComponentUpdate : 컴포넌트가 업데이트 될 때 호출되며, 업데이트가 필요한지 여부를 결정한다. 여기서 false를 반환하면 업데이트가 취소된다.

render : 컴포넌트의 UI를 렌더링한다.

getSnapshotBeforeUpdate : 컴포넌트가 업데이트 되기 전에 호출되며, 업데이트 이전 DOM상태를 저장한다.

componentDidUpdate : 컴포넌트가 업데이트된 후 호출되며 외부 API 호출 등 업데이트작업을 수행한다.

 

3. 언마운트 (Unmount) : 컴포넌트가 제거될 때 일어나는 과정

componentWillUnmount : 컴포넌트가 실제 DOM에서 제거되기 전에 호출되며, 리소스 해제등 정리 작업을 수행한다.

 

이러한 생애주기 메서드를 이용해서 컴포넌트가 마운트, 업데이트, 제거될 때 필요한 작업을 수행할 수 있다. 또한 컴포넌트 동작을 정확하게 제어하고 불필요한 렌더링을 방지하기 위해 잘 이해하고 사용해야 한다.

 

함수형 컴포넌트로 생애주기 제어하기

1. 마운트

useState : 컴포넌트가 생성될 때 상태값을 초기화 하고 상태값을 변경할 수 있다.

useEffect : 컴포넌트가 실제 돔에 렌더링 된 후에 실행되며, 외부 API 호출 등 초기화 작업을 수행한다.

 

2. 업데이트

useState : 상태 값을 변경할 수 있다.

useEffect : 컴포넌트가 업데이트 될 때 실행되며, 외부 API호출등 업데이트 작업을 수행한다.

useCallback : 함수를 캐싱하여 자식 컴포넌트에 전달할 때 성능을 최적화 한다.

 

3. 언마운트

useEffect : 컴포넌트가 실제 돔에서 제거될 때 실행되며, 리소스 해제 등 정리 작업을 수행한다. 

** useEffect는 컴포넌트가 마운트 되는 시점과 언마운트 되는 시점 모두 사용할 수 있다.

useEffect(() => {
    // 컴포넌트 마운트 시점에 실행됨
    console.log('mounted');

    // cleanup 함수를 반환
    return () => {
      // 컴포넌트 언마운트 시점에 실행됨
      console.log('unmounted');
    };
  }, []);