Book Log Ref#01

Purple·2022년 1월 31일
0

Project

목록 보기
3/4

1. useNavigate

navigate = useNavigate();

  • 프로젝트 중에 팀장이 사용한 navigate('/', { replace: true })에 대해 정확히 왜 사용하였는지 이해하지 못해 조사해보았다.

  • 일단, replace:true로 설정할때와 설정하지 않을때의 차이점 : true로 설정하면 뒤로가기를 눌렀을때 한번에 이동되지 않는다.

  • 왜일까? replace는 스택의 최상단에 있는 것을 "대체"한다.
    - When you use the router.replace, you're overwritting the top of the the stack.
    - When using the router.push, it adds a new route to the top of the stack.

  • 예를들어, 홈 → 게시판 → 로그인 순으로 이동한다고 가정한 후,

    • 로그인에서 push("/게시판")을 이용하여 이동하면 히스토리는 홈 → 게시판 → 로그인 → 게시판이 된다.

    • 반면 replace("/게시판)을 이용하여 이동하면 현재 히스토리인 로그인을 날려버리고 홈 → 게시판 → 게시판이 된다.

  • 따라서, 히스토리를 남기기 위해서 push를 사용해야한다.
  • replace는 언제 사용해야 할까? 잘못된 url이나 올바르지 못한 접근을 시도했을 때 강제로 redirect할 때 사용하는 것이 좋다. 예를 들어 로그인한 유저가 /login으로 접근하려고 할 때 돌려보내는 작업은 replace를 사용하는 것이 좋다. 그래야 잘못된 접근이 히스토리에 남지 않게 되기 때문이다.
profile
다시 보면, 더 많은 것들이 보인다.

0개의 댓글