대표적인 렌더링의 종류

클라이언트사이드 렌더링

- 웹브라우저에서 자바스크립트로 HTML을 만드는 것

 

리엑트로 할 수 있는 가장 기본적인 방식의 렌더링임 리엑트로 작성한 코드는 자바스크립트로 변환이 가능함.

참고로 이런 변환을 트렌스파일링이라고 부름.

클라이언트 사이드 렌더링은 자바스크립트로 변환된 리액트 코드를 웹 브라우저에서 실행해서 HTML을 만드는 것을 말함

 

서버사이드 렌더링(next.js)

-서버에서 HTML을 만들고 리스폰스로 보내주는 것

백엔드 서버에서 리퀘스트를 받으면 상황에 맞는 HTML을 만들어서 리스폰스로 보내주는 방식을 '서버사이드 렌더링'이라고 함. 서버에서 HTML을 만든다는 뜻

리액트에서도 서버사이드 렌더링을 할 수 있는 기능을 제공함. 이렇게 하면 이미 렌더링 된 것이 웹 브라우저에 도착하니까 훨 씬 빠리 화면을 띄워줄 수 있고, 검색 엔진에서 좋은 점수를 받아서 검색했을 때 사이트가 잘 노출될 수 있다는 장점이 있음.

 

정적 사이트 생성

- 미리 HTML 파일을 만들어서 서버를 배포하는 것

 

서버에서 렌더링 하는 것도 좋지만. 데이터가 거의 바뀌지 않는 다면 매번 새로 만드는 것은 낭비일 수 있음

그래서 HTML파일로 만들고 이걸 서버로 배포하는 방법을 사용하는데, 이런 방식을 '정적 사이트 생성'이라고 함.

서버에서는 리퀘스트가 들어오면 HTML파일을 읽어서 리스폰스로 보내줌

'정적 사이트 생성'에서 정적이라는 말의 의미는 HTML을 파일로 만든 다는 것임. 개발자가 새로 배포하지 않는다면 서버에서 보내주는 HTML이 달라지지 않는다는 의미임 용어가 생소해 보이지만 쉽게 생각해서 리액트 코드로 HTML파일을 만든다고 생각할 수 있음

물론 자바스크립트를 쓸 수 있기 때문에 정적으로 생성된 사이트에서도 동적인 데이터를 가져와 페이지를 보여줄 수 있음

 

렌더링을 활용한 리액트기술들

 

Next.js

=리액트 서버사이드 렌더링을 편하게

리액트에서는 서버사이드 렌더링을 하는 기능들을 제공하고 있지만 아주 기본적인 방법들만 제공함. 때문에 매번 작성해야 하는 코드의 양도 많고 복잡함. 그래서 개발자들은 서버사이드 렌더링을 대신 구현해주는 기술들을 만들기 시작함. Next.js는 그렇게 만들어진 기술중에서 가장 인기있는 기술임

 

2021년을 기준으로 말하자면 리액트로 서버사이트 렌더링을 구현하는 경우 대부분 Next.js를 사용한다고 보면 됨

심지어 리액트 공식사이트에서도 Next.js 를 추천함 특히 리액트 라우터랑은 다르게 HTML파일을 나누듯이 자바스크립트 파일을 나눠 놓으면 곧바로 페이지로 이동할 수 있다는 장점도 있음

 

Gatsby

=리액트로 정적사이트 만들기

 

Gatsby는 리액트 코드를 미리 렌더링 해서 프로젝트를 빌드할 때 HTML파일로 만듬 위에서 이런 방식을 정적사이트라고 했음 Gatsby를 사용하면 리액트로 만든 사이트를 빌드해서 손쉽게 HTML 파일로 만들 수 있음

 

React Native

 

마지막으로 소개할 기술은 React Native임. 자바스크립트로 된 리액트 코드는 서버나 클라이언트에서 HTML로 변환됨. 하지만 HTML로 변환한다는 상식을 깨고 모바일 앱을 개발 할 수 있도록 해주는 기술임.

리액트로 작성한 코드를 모바일 앱으로 만들 수 있게 해줌. 리액트 코드로 개발하면 웹과 안드로이드와 iOS앱에서 사용하는 공통적인 코드를 한번에 개발할 수 있다는 장점이 있음

여러 플랫폼의 서비스를 빠르게 개발할 수 있기 때문에 많은 스타트업에서 React Native를 활용하고 있음