TIL - React - history

회사 기존코드 공부하며 새로 배운 것 정리

history.push

• history.push("/login")과 같이 사용한다
• history stack을 활용한다
• jsx에서 쓸수 없다. 어떠한 event가 일어났을 때 작동할 함수 안에서 활용
• 하위(자식) 컴포넌트에서 history객체를 사용하려면, props를 통해 부모 컴포넌트로부터 전달받아야 한다.
  • BrowerRouter와 Router를 사용한 경우 라우팅 된 페이지 최상위 컴포넌트에는 props를 통해 history객체가 자동으로 전달된다

history.replace

• Redirect처럼 현재(이동전)의 URL이 이동 후에는 남지 않도록 할 때 쓴다.

Redirect

• react-router-dom의 Redirect를 import해온 후 <Redirect to='/login'>와 같이 사용한다
• history.replace처럼 작동한다. (history에 이동전 경로가 남지 않는다)
• JSX안에서 쓴다. 어떠한 state에 따라 리다이렉트 여부를 결정해야 할 때 활용한다
• history객체를 props로 넘겨받아오지 않아도 자식 컴포넌트에서 Redirect를 통해 다른 페이지로 이동시켜줄 수 있다는 편리함이 있다.

Link

• react-router-dom의 Link를 import해온 후 <Link to='/login'>와 같이 쓴다
• 내부적으로 <a></a>태그를 통해 작동되고 사용법도 비슷하지만, 실제 동작은 일반적인 <a></a>태그와 다르게, 페이지 전체를 리로드하지 않고 필요한 부분만 리로드한다
• JSX안에서 쓴다. 어떤 부분을 클릭했을때 페이지 이동을 시키고 싶을떄 쓴다
• history.push 처럼 이동전 경로가 history객체에 남는다
  • 안남기고 싶다면 <Link to='/login' replace={true}/> 처럼 쓴다

history.push()로 페이지 이동시 props 넘겨주기

• ex) 앞 페이지에서 입력한 휴대폰 번호를 history.push(pathname)으로 이동하는 다음 페이지에서 나타내주기
• 일반적인 history.push() 사용법

// 'PhoneValidate' 컴포넌트 에서 'SetAccount' 컴포넌트로 이동
<button onClick={() => {this.props.history.push("/set_account")}} />

• history.push()로 props를 넘겨주는 방법

// 'PhoneValidate'의 'userCell' state를 'SetAccount'로 이동시 props로 넘겨주기
import {useHistory} from "react-router";
const history = useHistory();
<button onClick={() => {history.push({
  pathname: "/set_account",
  state: {userCell: userCell}
})}} />

• 이동한 페이지에서 props를 불러오는 방법

// 넘겨받은 'userCell' props를 'SetAccount'에서 사용하기
import {useLocation} from "react-router";
const location = useLocation();
const userCell = location.state.userCell;

참고 https://velog.io/@dhlee91/this.props.history.push%EB%A1%9C-props-%EB%84%98%EA%B2%A8%EC%A3%BC%EA%B8%B0