React Router ) Link 기능을 함수로 빼기, history와 location

목차

 

기존에 html/js로 하드코딩한 프로젝트를 리액트로 리팩토링하게 되었다.

리액트로 리팩토링하면서 프론트와 백을 확실하게 나누게 되었다.

 

리액트 라우트를 사용하면 <a></a>보다 <Link to={{...}}></Link>를 권장한다.

하지만, Link를 사용하다보면 기존 element UI가 무너지는 경우가 있다.

 

다음과 같이 table 안에 tr을 정의해 링크를 걸어주고 싶은 경우,

Link로 감싸게 되면 UI가 무너진다.

 

코드부터 보기

때문에 링크 이동 기능을 함수로 뺄 필요가 있다.

tr태그에 onClink으로 링크 이동 함수 linkToArticleDetail 를 연결해주자.

import React from 'react';
import {Link, useHistory} from "react-router-dom";

const ArticleListItem = ({index, article}) => {
  let history = useHistory();

  let linkToArticleDetail = () => {
    history.push({
      pathname: `/admin/article/${article.articleId}`,
      state: {
        article: article
      }
    })
  }

  return (
    <tr onClick={linkToArticleDetail}>
      <td>{index}</td>
      <td>{article.articleTitle}</td>
      <td>{article.articleArtistName}</td>
      <td>{article.articleType}</td>
      <td>{article.articleStock}</td>
      <td>{article.articlePivot}</td>
      <td>{article.createDateTime}</td>
      <td>{article.updateDateTime}</td>
      <td>{article.deleteDateTime}</td>
      <td>메뉴</td>
    </tr>
  );
}

사용방법은 굉장히 간단하다.

react-router-dom 모듈에서 useHistory Hooks를 가져와 history를 선언, 

history에 객체를 넣어주면 된다.

 

state를 넘겨주고 싶을 땐 history에 state 객체로 넘겨준다.

이렇게 history를 통해 넘겨준 정보들은 prop.location으로 넘어간다.

location.state에 접근해 이전 페이지에서 state로 넘긴 객체를 활용한다.

  componentDidMount() {
    const {location} = this.props;
    let article = location.state.article;
    this.setState({article: article})
  }

 

---

여기서 알아보는 history와 location!

공식 문서 보기

https://reactrouter.com/web/api/Hooks

React Router: Declarative Routing for React

https://reactrouter.com/web/api/history

React Router: Declarative Routing for React

https://github.com/ReactTraining/history/tree/master/docs

ReactTraining/history

 

 

🚨 history와 location은 hooks로 함수형 컴포넌트에서만 사용가능하다. class형 컴포넌트에선 다른 방법을 찾아야 한다.

 

The term “history” and "history object" in this documentation refers to the history package, which is one of only 2 major dependencies of React Router (besides React itself), and which provides several different implementations for managing session history in JavaScript in various environments.

즉 histroy는 session 기록을 관리할 수 있는 객체를 뜻한다. DOM에 내장된 history 객체를 사용하는데, push를 통해 세션 기록을 추가한다.

세션 기록 자체가 location 객체를 따르기 때문에 history.push(location)도 가능하다.

winow.location = '/home' 과 같아 보이지만 history 객체를 이용하면 state를 전달할 수 있는 장점이 있다.

 

Locations represent where the app is now, where you want it to go, or even where it was. It looks like this:

location은 현재 머무르고 있는  페이지의 정보를 담은 객체이다. 

{
  key: 'ac3df4', // not with HashHistory!
  pathname: '/somewhere',
  search: '?some=search-string',
  hash: '#howdy',
  state: {
    [userDefined]: true
  }
}

Link로도 보낼 수 있는데, 흔히 다음과 같은 형태를 많이 봤을 것이다.

to 프롭스에 location 객체를 바로 넣어준 형태이다.

<Link to={{
  pathname: '/home',
  state: {
   isArticle : true,
   }
}}>링크 메뉴</Link>

 

그럼 history와 location이 뭐가 다른데?

history는 세션 기록을 스택으로 쌓아 저장하는 형태이며, location은 현재 세션 기록이다.

더 정확히 말하면 history안에 쌓이는 세션 기록이 location 형태 (라고 이해함)

It is also found on history.location but you shouldn’t use that because it’s mutable.

공식 문서에서도 위와 같은 문제를 짚어준다. 그럼 history안에 있는 location 객체에 접근할 수 있겠네?

접근할 수 있지만 해선 안된다. history객체는 mutable, 즉 가변적이기 때문에 정확한 값을 얻을 수 없다.

 

내 야매 이해론, history엔 현재 location이 계속 업뎃 되기 때문에

이전 세션 기록을 기록하고 있는 preProps.histroy와 다르다고 이해했다.

 

class Comp extends React.Component {
  componentDidUpdate(prevProps) {
    // will be true
    const locationChanged =
      this.props.location !== prevProps.location;

    // INCORRECT, will *always* be false because history is mutable.
    const locationChanged =
      this.props.history.location !== prevProps.history.location;
  }
}

→ history-is-mutable 문서를 참고하시길...

 

 

간단한 개념이지만, 정리하다보니 원리를 알고 싶어 열심히 찾아보았다.

역시 기본이 중요해.. ㅠㅠ

 

오랜만에 리액트하니 너무 재밌다! 더 더 공부해야징 :)