[React Native] 컴포넌트 라이프사이클: 이해와 활용

컴포넌트 라이프사이클이란?

React Native 컴포넌트는 화면에 렌더링되고, 업데이트되며, 제거되기까지 특정한 단계들을 거칩니다.

이를 컴포넌트 라이프사이클이라고 합니다.

라이프사이클을 이해하면 컴포넌트의 동작 시점을 예측하고, 적절한 타이밍에 로직을 추가하거나 리소스를 관리할 수 있습니다.

출처: velog-wlwl99

---

컴포넌트 라이프사이클의 3단계

React Native 컴포넌트 라이프사이클은 마운트(Mounting), 업데이트(Updating), 언마운트(Unmounting)의 세 단계로 나뉩니다.

각 단계는 React의 라이프사이클 메서드와 관련이 있습니다.

1. 마운트(Mounting)

컴포넌트가 화면에 처음 렌더링될 때의 과정입니다.

1. constructor()

• 컴포넌트가 초기화될 때 호출됩니다.
• state를 초기화하거나 초기 설정 작업을 수행합니다.

constructor(props) {
  super(props);
  this.state = { count: 0 };
}

2. static getDerivedStateFromProps(props, state)

• 부모 컴포넌트에서 전달된 props를 기반으로 state를 업데이트합니다.
• 주로 특정 조건에 따라 state를 동기화할 때 사용됩니다.

3. render()

• 컴포넌트의 UI를 정의합니다.
• JSX를 반환하며, 이 단계에서 실제로 화면에 요소가 그려집니다.

render() {
  return <Text>Welcome!</Text>
}

4. componentDidMount()

• 컴포넌트가 화면에 렌더링된 직후 호출됩니다.
• API 호출, 데이터 로드 등 비동기 작업을 수행하기에 적합한 단계입니다.

비동기 작업
  - 특정 작업이 완료될 때까지 기다리지 않고 다른 작업을 먼저 실행하는 것
  - 퇴근까지 30분 남았는데, 퇴근 준비를 하고 있는 것과 비슷합니다.

componentDidMount() {
  console.log("Component mounted!");
}

2. 업데이트(Updating)

컴포넌트의 props나 state가 변경될 때 발생합니다.

1. static getDerivedStateFromProps(props, state)

• 업데이트 단계에서도 호출됩니다.

2. shouldComponentUpdate(nextProps, nextState)

• 컴포넌트를 다시 렌더링할지 결정하는 단계입니다.
• 반환값이 true이면 업데이트가 진행되고, false이면 렌더링을 건너뜁니다.

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

3. render()

• 컴포넌트의 UI를 다시 그립니다.

4. getSnapshotBeforeUpdate(prevProps, prevState)

• DOM 업데이트 직전에 호출됩니다.

DOM 업데이트
  - 웹 페이지의 내용이나 구조를 변경하는 것

• 스크롤 위치와 같은 정보를 캡처하는 데 유용합니다.
• 반환값은 다음 단계에서 사용할 수 있습니다.

5. componentDidUpdate(prevProps, prevState, snapshot)

• DOM 업데이트가 완료된 후 호출됩니다.
• 데이터를 새로 가져오거나, DOM을 직접 조작할 때 유용합니다.

componentDidUpdate(prevProps, prevState) {
  if (this.state.count !== prevState.count) {
    console.log("Count updated!");
  }
}

3. 언마운트(Unmounting)

컴포넌트가 화면에서 제거될 때의 과정입니다.

1. componentWillUnmount()

• 컴포넌트가 언마운트되기 직전에 호출됩니다.
• 타이머를 제거하거나, 이벤트 리스너를 해제하는 작업에 적합합니다.

componentWillUnmount() {
  console.log("Component will unmount!");
}

함수형 컴포넌트와 라이프 사이클

React Hook인 useEffect를 사용하면 함수형 컴포넌트에서도 라이프사이클을 제어할 수 있습니다.

import React, {useState, useEffect} from 'react';
import {Text, Button, View} from 'react-native';

const Counter = () => {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    console.log("Component mounted or updated");
    
    return () => {
      console.log("Component will unmount");
    };
  }, [count]);
  
  return (
    <View>
      <Text>{count}</Text>
      <Button title="Increase" onPress={() => setCount(count + 1)} />
    </View>
  );
};

export default Counter;

---

React Native 컴포넌트 라이프사이클은 컴포넌트의 동작과 데이터를 관리하는 데 핵심적인 역할을 합니다.

클래스형 컴포넌트와 함수형 컴포넌트의 라이프사이클 동작을 이해하면 더 효율적이고 유지보수 가능한 코드를 작성할 수 있습니다.

 

State and Lifecycle – React