TIL - React 컴포넌트의 생애주기

React 컴포넌트의 생애주기

1. 마운트 (Mount)

• constructor: 컴포넌트가 생성될 때 호출됩니다. 상태(state)를 초기화하고, props를 초기화합니다.
• getDerivedStateFromProps: 컴포넌트가 마운트되기 전에 호출되며, props로부터 파생된 state를 설정할 수 있습니다.
• render: 컴포넌트의 JSX를 반환하여 가상 DOM을 생성합니다.
• componentDidMount: 컴포넌트가 마운트된 후에 호출됩니다. 이곳에서 네트워크 요청이나 DOM 조작을 수행할 수 있습니다.

예제 코드

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data: null };
    console.log('Constructor');
  }

  componentDidMount() {
    console.log('ComponentDidMount');
    // 네트워크 요청 등
  }

  render() {
    console.log('Render');
    return <div>Hello, World!</div>;
  }
}

2. 업데이트 (Update)

• getDerivedStateFromProps: 컴포넌트가 업데이트되기 전에 호출됩니다.
• shouldComponentUpdate: 컴포넌트가 리렌더링될지 여부를 결정합니다. true 또는 false를 반환합니다.
• render: 컴포넌트의 새로운 JSX를 반환하여 가상 DOM을 업데이트합니다.
• componentDidUpdate: 컴포넌트가 업데이트된 후에 호출됩니다.

예제코드

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data: null };
    console.log('Constructor');
  }

  shouldComponentUpdate(nextProps, nextState) {
    console.log('ShouldComponentUpdate');
    return true;
  }

  componentDidUpdate(prevProps, prevState) {
    console.log('ComponentDidUpdate');
    // 업데이트 후 작업
  }

  render() {
    console.log('Render');
    return <div>Hello, World!</div>;
  }
}

3. 언마운트 (Unmount)

• componentWillUnmount: 컴포넌트가 DOM에서 제거되기 전에 호출됩니다. 타이머 정리, 네트워크 요청 취소, 이벤트 리스너 제거 등의 작업을 수행합니다.

예제코드

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data: null };
    console.log('Constructor');
  }

  componentWillUnmount() {
    console.log('ComponentWillUnmount');
    // 정리 작업
  }

  render() {
    console.log('Render');
    return <div>Hello, World!</div>;
  }
}