[React] history.push()로 props 넘겨주기

부모-자식 component 관계가 아닌, routing으로 특정 페이지에서 다른 페이지로 이동 할때도 props를 넘겨 줄 수 있는 아주 간단한 방법이 있다.
( Function Component 기준 )

1. 일반적인 history.push() 사용법

---

• 'Prev' 컴포넌트 에서 'Next' 컴포넌트로 이동

  <button onClick={() => {history.push("/Next")}} />

2. history.push()로 props 활용하기

---

2-1. history.push()로 props를 넘겨주는 방법

• Prev 의 'displays' state를 Next 로 이동시 props로 넘겨주기

  import { useHistory } from "react-router";
  
   const history = useHistory();
  
   <button onClick={() => {history.push({
     pathname: "/Next",
     state: {displays: displays}
   })}} />

2-2. 이동한 페이지에서 props를 불러오는 방법

• 넘겨받은 'displays' props를 Next 에서 사용하기

  import { useLocation } from "react-router";
  
   const location = useLocation();
  
   const item = location.state.displays;

3. 마무리

이렇게 간단하게 routes 이동시, 이전 페이지에서 다음 페이지로 props를 넘겨줄 수 있다. 토이 프로젝트에서 유용하게 쓰일 듯 😊👍