싱글 페이지 애플리케이션(SPA) 이해하기

리액트 라우터에서 <a> 태그가 아닌 Link 컴포넌트로 하이퍼링크를 만든 이유가 뭘까?

• 우리가 만든 게 (SPA) Single Pange Application이기 때문임
• 클라이언트 사이드 렌더링(Client-side Rendering, CSR)
  • 클라이언트: 웹 브라우저
  • 렌더링: HTML 페이지를 만드는 것
  • 즉 웹 브라우저에서 자바스크립트로 HTML 페이지를 만드는 것
• 싱글 페이지 애플리케이션
  • 하나의 HTML 문서 안에서 자바스크립트로 여러 페이지를 보여주는 사이트
  • Link 컴포넌트에서는 웹 브라우저의 기본 동작 대신에 리액트 라우터를 통해서 경로에 맞는 리액트 컴포넌트를 렌더링하고 주소창의 글자를 바꾸고 웹 브라우저에 기록을 추가함
  • 리퀘스트를 보내지 않고도 자바스크립트를 사용해서 마치 다른 HTML 페이지를 받은 것처럼 흉내내는 것
  • 개발 모드에서는 모든 가능한 경로에 대해서 똑같은 HTML을 보내주도록 설정 돼 있음
  • root div에다가 클라이언트사이드 렌더링을 하는데 리액트 라우터가 주소창에 적힌 경로를 읽어서 경로에 일치하는 컴포넌트를 렌더링하는 방식임
  • 클라이언트사이드렌더링으로 리액트 라우터를 사용하는 경우에는 서버에 배포할 때 따로 설정을 해줘야함

---

리액트를 렌더링하는 방식

대표적인 렌더링의 종류

클라이언트사이드 렌더링(Client-side Rendering)

• 웹 브라우저에서 자바스크립트로 HTML을 만드는 것
• 리액트로 할 수 있는 가장 기본적인 방식의 렌더링
• 리액트로 작성한 코드는 자바스크립트로 변환이 가능한데 이런 변환을 트랜스파일링이라고 부름
• 자바스크립트로 변환된 리액트 코드를 웹 브라우저에서 실행해서 HTML을 만드는 것

서버사이드 렌더링(Server-side Rendering)

• 서버에서 HTML을 만들고 리스폰스로 보내주는 것
• 백엔드 서버에서 리퀘스트를 받으면 상황에 맞는 HTML을 만들어서 리스폰스로 보내주는 방식
• 이미 렌더링 된 것이 웹 브라우저에 도착하니까 훨씬 빨리 화면을 띄워줄 수 있고,검색 엔진에서 좋은 점수를 받아서 검색했을 때 사이트가 잘 노출될 수 있다는 장점이 있음

정적 사이트 생성(Static Site Generation)

• 미리 HTML 파일을 만들어서 서버를 배포하는 것
• 서버에서 렌더링 하는 것도 좋지만, 데이터가 거의 바뀌지 않는다면 매번 새로 만드는 건 낭비임
• 미리 HTML 파일로 만들고 이걸 서버로 배포하는 방법을 사용하는데, 이런 방식을 '정적 사이트 생성'이라고 함
• 서버에서는 리퀘스트가 들어오면 HTML 파일을 읽어서 리스폰스로 보내주는 것
• '정적 사이트 생성'에서 정적이라는 말의 의미는 HTML을 파일로 만든다는 것임
• 리액트 코드로 HTML 파일을 만든다고 생각하면 됨
• 자바스크립트를 쓸 수 있기 때문에 정적으로 생성된 사이트에서도 동적인 데이터를 가져와 페이지를 보여줄 수 있음

렌더링을 활용한 리액트 기술 세 가지

Next.js

• 리액트 서버사이드 렌더링을 편하게할 수 있음
• 리액트에서는 서버사이드 렌더링을 하는 기능들을 제공하고 있지만, 아주 기본적인 방법만 제공해서 작성해햐 하는 코드의 양도 많고 복잡함
• 서버사이드 렌더링을 대신 구현해주는 기술들 중 가장 인기 있는 기술
• 리액트 라우터랑은 다르게 HTML 파일을 나누듯이 자바스크립트 파일을 나눠 놓으면 곧바로 페이지로 사용할 수 있다는 장점이 있음

Gatsby

• 리액트로 정적 사이트 만들기
• Gatsby는 리액트 코드를 미리 렌더링 해서 프로젝트를 빌드할 때 HTML 파일로 만듦
• Gatsby를 사용하면 리액트로 만든 사이트를 빌드해서 손쉽게 HTML 파일로 만들 수 있음
• 회사 소개 사이트나 동아리 홈페이지 혹은 포트폴리오 사이트 같이 정적인 사이트를 리액트로 만들때 사용할 수 있음

React Native

• 리액트로 작성한 코드를 모바일 앱으로 만들 수 있게 해 줌
• 리액트 코드로 개발하면 웹과 안드로이드와 iOS 앱에서 사용하는 공통적인 코드를 한 번에 개발할 수 있다는 장점이 있음
• 여러 플랫폼의 서비스를 빠르게 개발할 수 있기 때문에 많은 스타트업에서 React Native를 활용하고 있음