React Router의 히스토리 객체

1. React 라우터 기록
2. 리디렉션에 대한 React 라우터 기록
3. React Router V4의 history.push()

탐색은 모든 최신 응용 프로그램의 필수적인 부분입니다. JavaScript 기반 프레임워크는 일반적으로 기본 히스토리 객체를 다양한 탐색 솔루션의 기반으로 사용합니다. 이 객체는 DOM의 Window 객체의 속성으로 사용할 수 있습니다.

React에서 애플리케이션을 개발할 때 개발자는 React Router 라이브러리를 사용할 수 있습니다. 브라우저 기록 인터페이스의 개선된 버전인 history 패키지를 포함한 모든 탐색 기능을 제공합니다. React Router history 객체에는 action, location, .push() 또는 .replace()와 같이 탐색을 구성하는 데 사용할 수 있는 많은 속성과 메서드가 포함되어 있습니다. 아래 섹션에서 주요 탐색 요구 사항을 처리하기 위해 이러한 속성과 메서드를 가장 잘 사용하는 방법을 검토할 것입니다.

React 라우터 기록

history 패키지(줄여서 history)는 JS에서 세션 기록을 관리하는 데 필요한 핵심 도구입니다. 앞서 언급했듯이 여기에는 많은 방법이 포함되어 있으며 모두 고유한 방식으로 유용합니다. 그래도 history.push() 메소드는 틀림없이 가장 중요하고 우리 가이드의 주요 초점이 될 것입니다.

히스토리 스택

브라우저는 사용자가 방문한 다양한 URL을 추적합니다. 이 세션 기록을 기록 스택이라고 하며 브라우저의 뒤로 또는 앞으로 버튼이 작동하는 데 필요합니다.

기록 개체에는 기록 스택에 영향을 줄 수 있는 속성과 메서드가 있습니다. 예를 들어 .replace() 메소드는 히스토리 스택의 가장 최근 경로를 대체합니다. .length 속성은 스택의 항목 수를 제공합니다.

.push() 방법은 아마도 가장 중요하고 널리 사용되는 방법일 것입니다. 개발자는 이를 사용하여 항목을 스택에 푸시하여 사용자를 다른 페이지로 리디렉션합니다. 이 방법은 필수적이며 가이드의 뒷부분에서 자세히 설명합니다.

location

위치 개체는 앱의 현재(때로는 과거) 경로 이름에 대한 정보를 표시합니다. React Router는 이 객체를 여러 번 사용할 수 있도록 합니다. 예를 들어 props 개체의 속성으로 Route 구성 요소에서 액세스할 수 있습니다. 공식 React Router문서에서 자세히 알아보세요.

history 개체에는 location 속성도 있습니다. 그러나 history 개체는 변경 가능하므로 location 속성 값을 사용하는 것은 권장되지 않습니다. 대신 <Route>의 소품을 통해 location에 액세스할 수 있습니다. 이렇게 하면 올바른 위치 정보에 액세스하고 있는지 확인할 수 있습니다.

리디렉션에 대한 React 라우터 기록

애플리케이션을 개발할 때 사용자가 작업을 수행한 후 경로를 변경해야 하는 경우가 많습니다. 이렇게 하려면 이벤트 핸들러를 설정하고 .push() 메서드를 사용하여 특정 경로 이름으로 리디렉션해야 합니다.

React Router V5의 history.push()

후크가 도입된 이후로 기능적 구성 요소는 훨씬 더 유용해졌습니다. v5의 출시와 함께 react-router-dom은 히스토리 객체에 더 쉽게 액세스할 수 있도록 useHistory() 후크를 제공하기 시작했습니다. 실용적인 예를 살펴보겠습니다.

import { useHistory } from "react-router-dom";
function Homepage() {
  let historyObj = useHistory();
  function handleClick() {
    historyObj.push("/");
  }
  return (
    <div>
    ...
    <button onClick={() => handleClick()}>
      Go to Homepage
    </button>
    ...
    </div>
  );
}

이 예에는 간단한 Homepage 구성 요소가 있습니다. 먼저 react-router-dom 패키지에서 useHistory 후크를 가져옵니다. 이것이 작동하려면 react-router-dom(또는 그 이상) 버전 5를 설치해야 합니다. 후크는 historyObj 변수에 저장된 구성 요소의 history 객체를 반환합니다.

하나의 문자열 인수를 허용하는 핸들러 함수에서 앞서 언급한 .push(string) 메서드를 사용할 수 있습니다. 문자열을 히스토리 스택으로 푸시하고 사용자를 지정된 경로로 안내합니다.

React Router V4의 history.push()

React Router 버전 4에는 useHistory 후크가 포함되어 있지 않으므로 props를 통해 history 객체를 전달해야 합니다. 이것은 또한 후크와 호환되지 않는 클래스 구성 요소의 history에 액세스하는 유일한 방법이기도 합니다.

핸들러 함수에서 .push() 메서드를 사용하여 다른 경로로 이동할 수 있습니다. 이 예를 살펴보겠습니다.

function handleClick() {
  this.props.history.push('/')
}

props를 통해 history 개체에 액세스하려면 구성 요소가 액세스할 수 있는지 확인해야 합니다. 두 가지 방법이 있습니다.

1. <Route>의 component 속성을 사용하여 특정 구성 요소와 연결합니다. 예를 들어:

<Route path="/" component={Homepage} />

이 경우 Homepage 구성 요소는 props를 통해 history 개체에 액세스할 수 있습니다.

2. render 속성을 사용하여 기능을 정의합니다. 소품을 제공하고 다음 구문을 사용합니다.

<Route path="/" render={(props) => <Homepage {...props} />}/>