[React] 리액트 생명 주기(Life Cycle)

React는 컴포넌트 기반의 UI 라이브러리로, 각 컴포넌트가 화면에 렌더링 되고 업데이트되는 흐름을 이해하는 것이 중요합니다. 이 흐름을 React에서는 생명 주기(Lifecycle) 라고 부르며, 각 단계에서 컴포넌트가 수행하는 특정 작업들이 있습니다.

 

 

react life cycle - 커버 이미지

목차

1. React 생명 주기란?

2. Mounting (컴포넌트 생성)

3. Updating (컴포넌트 업데이트)

4. Unmounting (컴포넌트 제거)

추천글

위의 목차를 클릭하면 해당 글로 자동 이동 합니다.

1. React 생명 주기란?

React 생명 주기는 컴포넌트가 생성(Mounting), 업데이트(Updating), 제거(Unmounting) 되는 일련의 과정을 의미합니다. 컴포넌트는 이 세 가지 단계에서 각각의 메서드들을 호출하며, 이를 통해 다양한 작업을 처리할 수 있습니다.

 

2. Mounting (컴포넌트 생성)

Mounting은 컴포넌트가 처음으로 DOM에 삽입될 때의 단계입니다. 이 단계에서 호출되는 주요 메서드는 다음과 같습니다.

 

1.1. constructor()

컴포넌트가 생성자로 컴포넌트가 생성되면 가장 먼저 호출됩니다. 여기서 컴포넌트의 초기 상태를 설정하거나, 이벤트 핸들러를 바인딩할 수 있습니다.

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
}

 

1.2. getDerivedStateFromProps()

컴포넌트가 새로 생성될 때 props로부터 state를 설정해야 할 때 사용됩니다. 이 메서드는 컴포넌트가 렌더링 되기 전에 호출되며, 리턴 값은 새로운 상태가 됩니다.

static getDerivedStateFromProps(nextProps, prevState) {
  if (nextProps.someValue !== prevState.someValue) {
    return { someValue: nextProps.someValue };
  }
  return null;
}

 

1.3. render()

render() 메서드는 컴포넌트의 UI를 정의하는 함수입니다. React는 이 메서드를 호출하여 JSX를 반환하고, 이를 DOM에 렌더링 합니다.

render() {
  return <div>Hello, World!</div>;
}

 

1.3. componentDidMount()

컴포넌트가 처음으로 화면에 렌더링된 직후에 호출됩니다. 주로 AJAX 요청이나 DOM 조작이 필요할 때 이 메서드에서 작업을 처리합니다.

componentDidMount() {
  fetch('/api/data')
    .then(response => response.json())
    .then(data => this.setState({ data }));
}

 

2. Updating (컴포넌트 업데이트)

Updating 단계는 props 또는 state가 변경되었을 때, 즉 컴포넌트가 다시 렌더링 될 때 발생합니다. 이 단계에서 호출되는 메서드들은 다음과 같습니다.

 

2.1. getDerivedStateFromProps()
컴포넌트가 새 props를 받을 때마다 호출됩니다. 컴포넌트가 업데이트될 때 props에 따라 state를 업데이트해야 할 경우 사용됩니다.

 

2.2. shouldComponentUpdate()
이 메서드는 컴포넌트가 업데이트되기 전에 호출되며, 리렌더링 여부를 결정합니다. 성능 최적화를 위해 불필요한 렌더링을 방지할 수 있습니다.

shouldComponentUpdate(nextProps, nextState) {
  return nextState.someValue !== this.state.someValue;
}

 

2.3. render()

업데이트된 props나 state에 따라 UI를 다시 렌더링합니다. 이 메서드는 새로운 JSX를 반환하고, React가 이를 DOM에 반영합니다.

 

2.4. getSnapshotBeforeUpdate()

컴포넌트가 DOM에 업데이트되기 직전에 호출되며, 주로 스크롤 위치 같은 정보를 캡처하는 데 사용됩니다. 이 메서드가 반환한 값은 componentDidUpdate()로 전달됩니다.

getSnapshotBeforeUpdate(prevProps, prevState) {
  if (prevProps.list.length < this.props.list.length) {
    return this.listRef.scrollHeight;
  }
  return null;
}

 

2.5. componentDidUpdate()

컴포넌트가 업데이트된 후에 호출됩니다. 이 시점에서 DOM은 이미 업데이트되어 있으며, 여기서 추가적인 작업을 처리할 수 있습니다. 이 작업은 최초 렌더링에서는 호출되지 않습니다.

componentDidUpdate(prevProps, prevState, snapshot) {
  // 추가 작업 수행
}

 

4. Unmounting (컴포넌트 제거)

Unmounting은 컴포넌트가 DOM에서 제거될 때 발생합니다. 이때 호출되는 유일한 메서드는 componentWillUnmount()입니다.

 

componentWillUnmount()

컴포넌트가 DOM에서 제거되기 전에 호출되며, 주로 타이머를 정리하거나, DOM에 등록했던 이벤트를 제거하는 작업을 수행할 때 사용됩니다.

componentWillUnmount() {
  // 예시 : 타이머 정리
  clearInterval(this.timerID);
}

 

 

 

React의 생명주기는 컴포넌트가 생성, 업데이트, 그리고 소멸되는 과정을 의미하며, 크게 세 가지 단계로 나뉩니다:

1. 마운트(Mount): 컴포넌트가 처음 DOM에 삽입되는 단계로 constructor(), componentDidMount() 등이 호출됩니다.
2. 업데이트(Update): 컴포넌트의 상태 또는 props가 변경되어 재렌더링되는 단계로 shouldComponentUpdate(), componentDidUpdate() 등이 실행됩니다.
3. 언마운트(Unmount): 컴포넌트가 DOM에서 제거되는 단계로 componentWillUnmount()가 호출됩니다.

이 과정을 이해하면, 컴포넌트의 동작과 성능을 효율적으로 관리할 수 있습니다.

 

 

추천글

[React] 리액트 useReducer

 

[React] 리액트 useRef란?