React - 리액트를 렌더링하는 방식에 대해(CSR, SPA 등)

리액트라우터에서는 a태그대신, Link라는 컴포넌트로 하이퍼링크를 만들었다.

왜 웹브라우저 기본기능이 있는데도 사용하지않고 Link를 사용하는 것이냐면,

우리가 여태 만든 react프로젝트는 Single Page Application이기 때문이다.

 

Single Page Application이란

• Single Page : 하나의 HTML문서.
• application : 어플같이 여러 페이지를 보여주는 사이트.
• 여러 경로의 HTML문서를 돌아다니며 화면을 보여주는 것이 아니라, 하나의 HTML문서 안에서 자바스크립트를 사용해 여러페이지를 보여준다는 뜻.

---

렌더링 방식

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

• 클라이언트 : 웹브라우저
• 렌더링 : HTML페이지를 만드는 것.
• ∴ 웹브라우저에서 자바스크립트로 HTML페이지를 만든다는 뜻.
• 리액트로 작성한 코드는 자바스크립트로 변환이 가능하다.(이러한 변환을 트랜스파일링 이라고 부른다.)
• 클라이언트 사이드 렌더링은 자바스크립트로 변환된 리액트 코드를 웹브라우저에서 실행해서 HTML을 만드는 것을 말한다.

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

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

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

• 미리 HTML파일을 만들어서 서버를 배포하는 것.
• 서버에서 렌더링하는 것도 좋지만, 데이터가 거의 바뀌지 않는다면 매번 새로 만드는 것은 낭비일 수 있다.
• 그래서 미리 HTML파일로 만들고 이걸 서버로 배포하는 방법을 사용하는데, 이런 방식을 정적 사이트 생성이라고 한다.
• 서버에서는 리퀘스트가 들어오면, HTML파일을 읽어서 response로 보내준다.
• 정적 사이트 생성이라는 말은 HTML을 파일로 만든다는 것. 개발자가 새로 배포하지않는다면 서버에서 보내주는 HTML이 달라지지않는다. 

---

렌더링을 활용한 기술의 예

Next.js

• 리액트의 서버사이드 렌더링을 편하게 해준다.
• 리액트에있는 서버사이드 렌더링 기능들은 아주 기본적인 방법만 있기 때문에, 매번 작성해야하는 코드의 양도 많고 복잡하기에 Next.js를 사용하면 편하다.

gatsby

• 리액트로 정적 사이트를 만들어준다.
• 회사 소개사이트나 동아리 홈페이지 혹은 포트폴리오같이 정적인 사이트를 리액트로 만들고 싶을 때 사용하면 좋다.

react native

• 모바일앱!