지난 두 개의 포스팅에 걸쳐서 React Router를 이용해서 React 앱에서 라우팅을 하는 방법을 알아보았습니다. React Router로 라우팅 하기 React Router로 중첩 라우팅 하기 이번 포스팅에서는 그 동안 배운 라우팅 방법을 기반으로 React 앱에서 어떻게 React Router를 이용해서 사용자 인증을 구현할 수 있는지 살펴보도록 하겠습니다. 인증이 필요없는 컴포넌트 로그인 하기 전까지는 모든 기능을 차단하는 앱이 있지만, 더 많은 경우에는, 인증없이도 접근 가능한 영역이 있기 마련입니다. 예를 들어, 홈페
지난 포스팅에서 React Router로 기본적인 라우팅 방법을 다루었습니다. 이번 포스팅에서는 React Router로 중첩 라우팅을 구현하는 방법에 대해서 알아보겠습니다. 중첩 라우팅이란? 중첩 라우팅(Nested Routing)이란 라우팅 맵핑을 최상위 컴포넌트 뿐만 아니라 여러 개의 컴포넌트에 걸쳐서 단계별로 정의하는 라우팅 기법입니다. 예를 들어, 브라우저의 주소 창에 https://www.your-site.com/users라고 입력되었을 때, 유저 목록 페이지가 표시되고, https://www.your-site.com/a
React를 이용해서 SPA(Single Page Application)을 개발할 때 흔히 겪는 어려움 중에 하나가 웹페이지 라우팅입니다. 이번 포스팅에서는 React Router라는 라이브러리를 사용해서 SPA에서 라우팅을 하는 방법에 대해서 알아보겠습니다. 간단한 라우팅 구현 기본적으로 SPA는 index.html 파일에 div 엘리먼트만 하나 두고, 자바스크립트로 모든 부분을 동적으로 랜더링하는 구조를 취합니다. 그리고 화면의 전체 또는 일부를 브라우저에서 발생하는 이벤트에 따라서 동적으로 갱신할 수 있기 때문에 인터랙티브 한