match와 location을 알아보도록 하겠습니다.BrowserRouter와 우리의 App을 연결하면 어떻게 된다고 했었나요? 라우터가 history api에 접근할 수 있고, Route에 연결된 컴포넌트에 match와 location, history props를 전달합니다. 이번 포스팅에서는 match와 location에 대해서 알아보고 path와 querystring을 받아오도록 하겠습니다. 이전 예시에 위의 코드를 복사해서 붙여넣어주세요. 라우트가 하나이고, "/"에 연결되어 있기 때문에 앱을 실행하면 크게 Home이라는 글자가 적힌 것을 볼 수 있습니다. 페이지가 에러없이 작동되면 F12를 눌러 구글 개발자 모드를 실행하고 콘솔 창을 확인해주세요. 우선은 나온 값들을 하나하나씩 알아보도록 하겠습..
리액트 라우터를 배워봅시다.라우팅이란 무엇일까요? 간단히 설명하자면 우리의 요청(url)에 맞게 연결해주는 것이라고 생각해주시면 됩니다. 우리는 url을 통해서 어떤 요청을 할까요? 우선 url이 어떤 형태인 지를 보겠습니다. 구글에 리액트 라우터라고 검색했을 때 url의 형태입니다. 파란부분(https)는 프로토콜입니다. 그리고 주황색 부분(www.google.co.kr)은 호스트 네임이라고 합니다. 중요한 건 호스트 네임 뒷부분에 있는 것들입니다. 초록색 부분(search)는 path name이라고 하고 "?"뒤에 있는 부분은 쿼리스트링(querystring)이라고 합니다. 또 페이지 내에서 위치를 표시할 때는 # 형태로 url이 좀 더 추가되기도 하는데 이 부분은 hash라고 표현합니다. 이렇게 용..