[React] TypeScript + React에서 useHistory, useLocation을 사용해 state 넘기기!

시작!

이번 포스팅에서는 typescript로 react application을 개발하며 useHistory와 useLocation을 이용해 State를 넘기는 과정을 작성해볼것이다!

 

🤖 useHistory를 사용한 route push와 state넘기기

 

우선 routing이 가능하게 하기 위해서는 useHistory를 import시킨다!

pathname은 이동하고자 하는 경로 주소를 입력해주면 되고, state에서는 전달하고자하는 state를 Object로 감싸고 이 두개를 또 Object로 감싸서 넘기면 된다! 너무 쉽지 않은강... 🙀

 

 

import { useHistory } from "react-router-dom";

export interface IState {
  a: string;
  b: string;
}

function ABC() {
  const history = useHistory();

  const onClick = () => {
    const s: IState = { a: "hey", b: "yo" };
    history.push({ pathname: "/abc/def", state: { myState: s } });
  };

  return (
    <>
      <Button onClicn={onClick}></Button>
    </>
  );
}

 

🤖 useLocation을 사용해 state 받기

 

ABC component에서 전달한 IState 타입의 state를 받기 위해서는 Ilocation 타입 내에 state interface를 지정하여 location을 받으면 된다.

 

import { useLocation } from "react-router-dom";
import React from "react";

interface Ilocation {
  myState: IState; //Object가 아닌 미리 정의한 interface를 지정해주는 것이 좋다
}

const CDF: React.FC = () => {
  const location = useLocation<Ilocation>();
  const s = location.state.myState;

  return <>{s.a}</>;
};

export default CDF;

 

이전에 Javascript로 react 개발을 할 때에는 타입 지정은 잘 안해주어도 되고, 그저 location객체를 만든 후 state를 불러와 사용하면 그만이었다!

확실히 Typescript를 사용하면 아직 모르는 것이 많아 헤매는 경우가 많지만! 그래도 Typescript만의 장점을 알아가며 Typescript가 선호되고 있는 이유에 대해서 깨닫는 중이다👍🏻

 

---

 

참고

 

[router Issue](https://github.com/reach/router/issues/414)