SPA

SPA(Single Page Application) : 한개의 페이지로 이루어진 어플리케이션
  기존의 어플리케이션은 서버에서 html을 만들어 제공하는 등의 형식으로 페이지 이동시마다 html을 받아오고 화면에 보여주는 형태였지만 서버에 과부하가 걸릴 위험성이 있다. 리액트는 뷰 렌더링을 사용자의 브라우저가 담당하도록 하며, 어플리케이션을 브라우저에서 불러와서 실행시킨 후 사용자와 인터랙션이 발생하면 필요한 부분만 자바스크립트를 사용해 업데이트하며 새로운 데이터가 필요하다면 서버 API를 호출하여 필요하 데이터만 불러와서 사용.

  싱글페이지라고 해서 화면이 한개인것은 아니다. 해당 페이지에서 로딩된 자바스크립트와 현재 사용자 브라우저의 주소상태에 따라 다양한 화면을 보여줄 수 있다.

라우팅 : 다른 주소에 다른 화면을 보여주는 것

 

SPA 단점 : 앱의 규모가 커지면 자바스크립트 파일이 너무 커지기에 페이지 로딩시 사용자가 실제 사용하지 않는 스크립트도 불러오게된다. 코드스플리틍을 통해서 트래픽과 로딩속도 개선 가능

 

react-router-dom : HTML5의 History API를 사용하여 페이지를 새로고침하지 않고도 주소를 변경하고 현재 주소와 관련된 정보를 props로 조회하거나 사용할 수 있게 해준다.

 

Route라는 컴포넌트를 이용하여 특정 주소 연결시

<Route path ="주소규칙" component={컴포넌트}/>

특정 컴포넌트만 나오게하기 위해서 exact라는 props를 true로 변경

 

Router에서 주소 연결

<a>사용시에는 페이지에서 가지고 있는 상태를 모두 날려버리기에 Link컴포넌트를 다음과 같이 사용한다.

<Link to ="주소">내용</Link>

NavLink는 css적용

history : 라우트로 사용된 컴포넌트에 match, location과 함께 전달되는 props중 하나로 이 객체를 통해 컴포넌트 내에 구현하느 메서드에서 라우터 API호출 할 수 있다.