spa 란?
전통적인 웹페이지는 사용자에게 보이는 화면은 서버측에서 준비, 사전에 html 파일을 만들어서 제공 하거나, 데이터에 따라 유동적인 html을 생성해 주는 템플릿 엔진을 사용하기도 ..
요즘은 웹에서 제공 되는 정보가 많기 떄문에 화면을 보여 줘야 할때마다 서버측에서 모든 뷰를 준비한다면 성능상의 문제가 발생할수 있다. 예로 트래픽이 너무 많이 나올수가 있고 서버에 높은 부하가 걸릴수 잇다. 속도와 트래픽 측면에선 캐싱과 압출을 해서 어느정도 최적화 할수이지만 사용자와의 인터렉션이 자주 발생하는 모던 웹 애플리케ㅅ이션에는 적당하지 않다. 리액트 같은 라이브러리를 사용한다면 애플리케이션을 브라우저에 불러와서 실행 시킨 후에 사용자와의 인터렉션이 발생하면 필요한 부분만 자바스크립트를 사용하여 업데이트 해준다. 만약 새로운 데이터가 필요하다면 서버 API를 호출하여 필요한 데이터만 새로 불러와 애플리케이션에서 사용 할수도
SPA 경우 서버에서 사용자에게 제공하는 페이지는 한종류 이지만, 해당 페이지에서 로딩된 자바스크립트와 현재 사용자 브라우저의 주소 상태에 따라 다양한 화면을 보여준다.
다른 주소에 다른 화면을 보여 주는 것을 라우팅 이라고 한다. 브라우저의 API를 직접 사용하여 관리하거나 라이브러리 사용해 구현 할수잇다. 리액트 라우팅 라이브러리는 리액트 라우터, 리치 라우터, Next.js 있다. 리액트 라우터는 클라이언트 사이드에서 이루어지는 라우팅을 아주 간단하게 구현 할 수 있도록 해준다. 더 나아가서 나중에 서버사이드 렌더링 할때도 라우팅을 도와주는 컴포넌트들을 제공.
spa 단점
- 앱의 규모가 커지면 자바스크립트 파일이 너무 커진다. 피이지 로딩 시 사용자가 실제로 방문하지 않을수도잇는 스크립트도 불러오기 때문 하지만 코드 스플리팅(code splitting)을 사용하면 라우트 별로 파일을 나누어 트래픽과 로딩 속도 개선 가능
- 크롤러에서 정보를 제대로 수집해 가지 못하며 스크립트 파일이 뜨는 동안 로딩되는 시간에 흰페이지가 나올수 있다. 하지만 서버 사이드 렌더링을 통해 해결 가능하다.
프로젝트 준비 및 기본적인 사용법
- 프로젝트 생성 및 리액트 라우터 적용 -> 페이지 만들기 -> Route 컴포넌트로 특정 주소에 컴포넌트 연결 -> 라우트 이동 -> URL 파라미터와 쿼리 이해하기 -> 서브 라우트 -> 부가 기능 알아보기
프로젝트에 라우터 적용
react-router-dom 에 내장되어 있는 BrowserRouter라는 컴포넌트를 감싼다. 이 컴포넌트는 웹애플리케이션에 HTML5의 History API를 사용하여 페이지를 개로고침 하지 않고도 주소를 변경하고 주소에 관련데 정보를 props로 쉽게 조회하거나 사용할수있도록 해준다.
Link 컴포넌트 사용 다른 주소로 이동
라우터를 사용하는 프로젝트에서 a 태그를 바로 사용하면 안됩니다. 왜냐하면, a 태그를 클릭하여 페이지를 이동할 때 브라우저에서는 페이지를 새로 불러오게 되기 때문입니다.
Link 컴포넌트 역시 a 태그를 사용하긴 하지만, 페이지를 새로 불러오는 것을 막고 History API를 통해 브라우저 주소의 경로만 바꾸는 기능이 내장되어 있습니다.
Link 컴포넌트는 다음과 같이 사용합니다.
URL 파라미터와 쿼리
유동적인 값을 전달할 때 파라미터와 쿼리로 나눌 수 있다.
- 파라미터 예시 : /profile/velopert
일반적으로 특정 아이디 혹은 이름을 사용하여 조회 할 때 - 쿼리 예시 : /about?defails=true
어떤 키워드를 검색하거나 페이지 필요한 옵션을 전달 할 때
https://velog.io/@velopert/react-router-v6-tutorial 참조
쿼리스트링
location 객체 반환 하면 다음과 같은 값이 있다.
- pathname: 현재 주소의 경로(쿼리스트링 제외)
- search: 맨 앞의 ? 문자 포함한 쿼리 스트링 값
- hash: 주소의 # 문자열 뒤의 값 (주로 History API 가 지원되지 않는 구형 브라우저에서 클라이언트 라우팅을 사용할때 쓰는 해시 라우터에서 사용)
- state: 페이지로 이동할때 임의로 넣을 수 있는 값
- key: location 객체의 고유 값, 초기에는 default 이며 페이지가 변경 될때마다 임의값 생성
쿼리스트링은 location.search 값을 통해 조회 가능
