2021.06.07(Mun.) <리액트의 라우터>

1. React SPA

• 옛날의 웹은 그냥 딱딱하게 정보를 전달 할 뿐이었다.
• 요즘의 앱은 상업적 가치를 가질만큼, 커졌고, 우리는 간단하게 이동하는 웹 에플리케이션을 만들 수 있게 되었다.
• 그중 오픈 소스인 React Router 가 대중화를 앞당겼다!

2. Router(라우터)

• 하나의 경로로 들어온 것들을 여러가지 경로로 나눠준다.
• 일명, 길을 정해주는 것. (길은 '주소' 가 되겠지. 그래서 그 주소를 바꿔주면서 로딩 없이 창이 열리게 된다.)

3. 라우터는 어떤 것들이 들어가 있는가

• BrowserRoute : 길을 정해 주는 친구
• Route : 길 그 자체
  • 뒤에 path를 붙여서 주소를 이동시킨다.
• Switch : Route로 감긴 컴포넌트 중에 한놈만 고른다. 말 그대로 스위치.
• Link : 이것도 그대로 링크.
  • 하지만 중요한건 같이 나오는 to => 이 쪽 주소로 보내라!
  • 'a'태그는 어울리지 않는다. 그 링크는 계속 로딩이 된다.
• exact: Route와 path 사이에 넣어주면, 그 주소가 아닌 다른 주소를 입력 받았을때 무시하고 정확한 그 주소만을 연결 시킨다.
  • 주소를 입력 받으면 뒤에서 앞으로 읽는다고 생각하면 편하다. 그렇기 때문에, 홈페이지의 주소가 '/' 일 경우 다른 페이지들과 주소가 겹쳐
    무조건 홈페이지만 나오게 된다. 이럴때 exact 로 정확한 홈페이지를 정해준다. 그래서 홈페이지 만들때 자주 쓰인다.

팁 : 뭔가 만들기 전에, 기본 틀을 그려보고, 필요한 기능을 적어놓고 시작하자. 훨씬 편하다. Figma 를 잘 사용하자.
우분투는 아직도 말성이다. 진짜 맥북 사야하나...
npm 오류를 해결중이다.
리액트 문법을 조금 더 정확히 알아야 한다.