리액트를 사용하는 이유

리액트를 대체 왜 쓸까 알아보자. 그냥 HTML을 뷰로 써서 작성해도 훨씬 간결하고 편한데 리액트는 왜 쓸까?

 

 

- 싱글페이지 애플리케이션

 

먼저 싱글페이지 애플리케이션에 대해 알아보자.

출처 - 위키피디아

 

말 그대로 페이지가 하나다. 우리가 첫 프로젝트때 했던것 처럼 뷰페이지가 여러개고 컨트롤러에서 요청에따라 다른 뷰페이지를 넘겨주는게 아니라 페이지는 하나고, 그 페이지를 구성하는 컴포넌트들이 바뀌면서 페이지가 넘어가는듯 보이게 한다.

 

컴포넌트는 

이렇게 클래스 형식으로 .jsx 파일에 작성된다. 

.jsx는 자바스크립트 환경에서 html태그를 그대로 사용할 수 있게해준다.

그래서 리액트를 경험해보지 않았다면, 이러한 함수를 보고 당황할 수 있다.

 

컴포넌트는 결국 하나의 영역이다. 

 

그 컴포넌트들을 하나씩 모아서 페이지를 이루는것이다.

 

사이트를 이렇게 구성하면 장점이 뭘까? 

 

바로 재사용성이다. 한번 만들어놓은 컴포넌트는 계속해서 재사용할수 있다. 

 

그리고 또 다른 장점이자 단점이 클라이언트 사이드 랜더링이라는 것이다.

 

클라이언트 사이드 랜더링이란?

 

위에 보여준것처럼 서버에서 페이지를 만들어서 클라이언트에게 보내지 않고 함수를 만들어 보낸뒤 

 

페이지 랜더링은 클라이언트 쪽에서 한다. 이렇게 된다면 장점이 무엇일까? 당연히 속도이다. 서버에서 계속해서 많은 트래픽에 페이지를 랜더링하는게 아닌 각각의 클라이언트에서 랜더링하기 때문에 속도가 매우 빠르다. 

 

하지만 이러한 클라이언트사이드 랜더링 방식에는 단점도 있다고 한다.

 

우선 처음에 한번에 받아오기 때문에 첫 로딩이 조금 길어진다. 그리고 가장 큰 문제가 검색엔진쪽 최적화이다. 

 

사이트를 만들고 대부분 많은 클라이언트들이 우리 사이트에 들어와야할텐데 서버사이드랜더링에 비해 검색이 잘 안된다고 한다. 

 

그럼 홈페이지의 목적에 따라 방식을 정해야 할 것같다는게 나의 마지막 결론이다. 

만일 특수한 목적을가진 페이지라면 검색엔진에 잘 노출될 필요 없이 목적을 가진 클라이언트가 들어와서 최적의 환경을 제공하기만 하면 된다. 그럴때 쓰는게 클라이언트 랜더링방식 아닐까?