[react] 생명주기 메서드를 이용하여 라우팅을 처리하는 방법은 무엇인가요?

22 Dec 2023

react

예를 들어, 특정 컴포넌트가 마운트되었을 때 특정 URL로 이동하거나 특정 작업을 수행하고 싶다면, componentDidMount 내부에서 React Router의 history 객체를 사용하여 해당 작업을 수행할 수 있습니다. 다음은 componentDidMount를 이용하여 라우팅을 처리하는 간단한 예시입니다:

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';

class MyComponent extends Component {
  componentDidMount() {
    // 특정 URL로 이동하기
    this.props.history.push('/new-url');

    // 또는 다른 작업 수행하기
    // ...
  }

  render() {
    return (
      <div>
        {/* 컴포넌트의 내용 */}
      </div>
    );
  }
}

export default withRouter(MyComponent);

이 예시에서 componentDidMount 메서드 내부에서 this.props.history.push('/new-url')를 사용하여 특정 URL로 이동하고 있습니다.

또 다른 방법으로는 componentDidUpdate를 사용하여 라우팅을 처리할 수도 있습니다. 여러분의 상황에 맞게 적절한 생명주기 메서드를 선택하여 라우팅을 다루면 됩니다.