prompt
-
[React] react-router v6 에서 Prompt 구현하기 :: 마이구미React 2022. 4. 17. 11:54
이 글은 네비게이션 가드라고 불리는 기능을 위한 Prompt 를 다룬다. 페이지 뒤로가기 또는 다른 페이지 이동으로 하면, 바로 페이지 전환이 일어난다. 때로는 Confirm 과 같은 창을 통해 페이지 이동을 막고 제어하는 것을 원할 수 있다. 이 기능을 네비게이션 가드라고 부를 수 있다. react-router v6 를 기준으로 한다. 이전에는 v4 를 기준으로 작성한 적이 있다. (https://mygumi.tistory.com/358) 예제 코드 - https://codesandbox.io/s/ljn1r8 현재 기준으로react-router 의 버전은 6.x 까지 올라왔다. major 버전이 올라간 만큼 v5 에서 v6 로 마이그레이션 하는 과정은 수정이 좀 필요하다. 그 과정 중 네비게이션 가드..
-
[React] Prompt 커스텀해서 제어하기 :: 마이구미React 2019. 10. 3. 12:53
이 글은 react-router 에서 제공하는 Prompt 컴포넌트를 다룬다. 페이지 뒤로가기 또는 다른 페이지 이동으로 하면, 바로 페이지 전환이 일어난다. 때로는 Confirm 과 같은 창을 통해 페이지 이동을 막고 제어하는 것을 원할 수 있다. react-router(v4) 를 사용하고 있다면, 쉽게 제공해주는 으로 해결할 수 있다. 참고 링크 - https://medium.com/@michaelchan_13570/using-react-router-v4-prompt-with-custom-modal-component-ca839f5faf39 브라우저에서 뒤로가기 뿐만 아니라 페이지 이동을 막는 것이 필요한 경우가 많다. 이를 해결하기 위한 방법으로 네비게이션 가드(Navigation Guard) 라고 ..