리액트가 왜 빠른가
->리액트가 없을 땐 매번 새로운 페이지를 리로드 한다던가 하는데 리액트는 가상 dom을 만들어서 변화가 생기고 바꿔야 하는 부분에서만 변화를 주고 바꿔주기 때문에 빠르다.
프로젝트에 리액트 라우터를 적용할 떄는 src/index.js파일 에서 react-router-dom에 내장되어 있는 BrowserRouter라는 컴포넌트를 사용하여 감싸면 된다. 이 컴포넌트는 웹 애플리케이션에 HTML5dml History API를 사용하여 페이지를 새로고침하지 않고도 주소를 변경하고, 현재 주소에 관련된 정보를 prop로 쉽게 조회하거나 사용할 수 있도록 해줍니다.
페이지 만들기
이제 라우트로 사용할 페이지 컴포넌트를 만들 차례이다. 사용자가 웹 사이트에 들어왔을 때 맨 처음 보여 줄 Home 컴포넌트와 웹 사이트를 소개하는 About컴포넌트를 만들어보자. src 디렉토리에 다음 파일을 만들자.
본인은 전에 클론했던 login.html 을 Login.js로
main.html을 Main.js로 가지고 왔다.
Route 컴포넌트로 특정 주소에 컴포넌트 연결
위 사진 처럼 App.js에 Route컴포넌트를 사용하여 Login.js 와 Main.js를 보여주도록 설정해야 한다.
이후에 주소창에 localhost:3000/ 또는 localhost:3000/Main 등의 경로로 들어가보자.
/Main을 들어온 것인데 Main만 있는 것이 아니라 Login컴포넌트도 들어있다. /Main경로가 /규칙에도 일치하기 때문에 발생하는 현상이다. 이를 수정하려면 Login을 위한 Route 컴포넌트를 사용할 때 exact라는 props를 true로 설정하면 된다.
App.js에서 
home 페이지로 설정된 Login 에 exact = {true} 를 더해줬다.
조금 깨지긴 하지만 Main컴포넌트 하나만 잘 나온다!
Link 컴포넌트를 사용하여 다른 주소로 이동하기
Link 컴포넌트는 클릭하면 다른 주소로 이동시켜주는 컴포넌트입니다. 일반 웹 애플리케이션에서는 a태그를 사용하여 페이지를 전환하는데 리액트 라우터를 사용할 떄는 이 태그를 직접 사용하면 안된다.
이 태그는 페이지를 전환하는 과정에서 페이지를 새로 불러오기 때문에 애플리케이션이 들고 있던 상태들을 모두 날려 버리게 된다. rendering된 컴포넌트들도 모두 사라지고 다시 처음부터 rendering하게 된다.
Link 컴포넌트를 사용하여 페이지를 전환하면, 페이지를 새로 불러오지 않고 애플리케이션은 그대로 유지한 상태에서 HTML5 History API를 사용하여 페이지의 주소만 변경해준다. Link 컴포넌트 자체는 a태그로 이루어져 있지만, 페이지 전환을 방지하는 기능이 내장되어 있다.
Link 컴포넌트는 다음과 같이 사용한다.
예시
<Link to ="주소">내용<"Link">이제 App컴포넌트에서 "/", "/Main" 경로로 이동하는 Link 컴포넌트를 만들어보자.
였는지 다시 확인해야 겠다
하는 도중에 Main이 깨져서 민지님의 통찰력으로 css 중 nav에 left:0를 주면 내 css깨진 게 돌아온 다는 것을 알게되었다!!!
