[React] 페이지 이동시 props 넘기기(useHistory,useLocation)

🦔 부모컴포넌트에서 자식컴포넌트로 props 내려보내는 방법외에 페이지 이동시 routing방법으로 내려보내는 방법도 있다!

1. useHistory();

가정상황

🙍‍♀️ input에 입력되는 값을 button클릭 시 페이지가 이동되며 입력된 값을 props로 내려보내기

• react-router-dom에서 useHistory를 불러온다.
  그리고 test라는 변수에 useHistory()를 저장한다.

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

const test = useHistory();

• state로 빈스트링으로 설정해주고 input에 이벤트 onChange가 실행될 때 handleChange함수가 실행된다.
  그리고 현재 입력되는 값을 setInputValue에 set해준다.

let [inputValue, setInputValue] = useState("");
const test = useHistory();
  const handleChange = (e) => {
    setInputValue(e.currentTarget.value);
  };


<input placeholder="ID" type="text" onChange={handleChange} />
  

• 그리고 button이 클릭 될 때 test(useHistory()).push를 사용하여 object형식으로 push를 할 수 있다. object에는 pathname에는 이동할 경로와 inputValue라는 key이름으로 inputValue를 보내주었다.

  <button type="submit" onClick={() =>  test.push({
                      		pathname: "/youtubeMain",
                      		inputValue: inputValue,
                    			})}>

🔗 이 외에도 아래 내용을 보낼 수 있다.

• 넘어온 props를 출력해보면?

console.log(props)
console.log(props.history.location.inputValue); 의 결과

• 이동하면서 넘어온props를 불러오는 경우

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

  const history = useHistory();
  console.log(history);
////넘어온 history를 확인할 수 있다! 

2. useLocation();

현재 페이지에 대한 url정보를 알려주는 hooks. url이 바뀔 때마다 새로운 location이 반환된다!

• react-router-dom 에서 useLocation을 가져온다.

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

• 다음 useLocation()에서 반환되는 객체를 history에 setup해준다.

  let location = useLocation();
  console.log(location);

• console 결과
  

💧 내용물은?
1. pathname : 현재 경로
2. search: ?부터 나오는 문자열 ex) ?id=1
3. hash : #부터 나오는 문자열 ex) #id=1
(search와 hash 동시에 사용할 수 있다!)
4. state: 숨겨서 보내는 정보
5. key: 고유한 문자열 키.
똑같은 페이지를 클릭하면 새로고침이 되는데 그럼 history stack에 클릭한 수만큼 정보가 쌓인다.
이 때 몇 번째 스텍에 있는 객체인지 알기 위해 key를 이용한다!