react-router
-
[React] 중첩 라우터 언제 사용하는가? :: 마이구미React 2022. 3. 13. 22:12
이 글은 React 에서 중첩 라우터를 활용한 예제를 다룬다. React 에 국한되지 않고, 중첩 라우터는 어떤 경우에 사용하고 이점은 무엇인가? 를 다루게 된다. react-router-dom v6 을 기준으로 다룬다. react-router - https://reactrouter.com/docs/en/v6/getting-started/overview 특정 사용자 페이지가 있다. (/user) 그리고 사용자 페이지에는 프로필 정보와 계정 정보를 위한 각각의 탭이 존재한다고 가정해보자. 이것은 단순하게 구현하면 다음과 같다. const UserPage = () => { const [tab, setTab] = useState('profile'); return ( User : { name } setTab('..
-
[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) 라고 ..