리액트(React)
- UI를 효과적으로 구축하기 위해 사용하는 자바스크립트(JavaScript) 기반의 라이브러리
- 기존에 웹 사이트를 만들 때에는 보통 프론트 엔드 부분을 객체 지향적으로 작성하지는 않았다. 백 엔드에서나 객체 지향 기법을 적절히 따르면서 개발했었다. 하지만 리액트는 프론트 엔드 또한 매우 객체 지향적으로 작성하도록 해주는 라이브러리이다.
- 리액트 오픈소스: https://github.com/facebook/react
- 리액트 학습 사이트: https://reactjs.org/docs/getting-started.html
리액트의 특징
선언적(Declarative): 리액트는 대화형 UI를 작성하기에 유리합니다. 데이터가 변경되었을 때 효율적으로 렌더링을 수행할 수 있도록 합니다.
컴포넌트 기반(Component-Based): 캡슐화된(Encapsulated) 컴포넌트가 상태를 관리하고 UI를 효과적으로 구성할 수 있습니다.
한 번 배워서 어디에서나 사용하기(Learn Once, Write Anywhere): 기존의 소스코드를 불필요하게 다시 작성하지 않고 새로운 기능을 개발할 수 있습니다.
리액트의 장점
- 뛰어난 성능 보유
- 클라이언트 렌더링 뿐만 아니라 서버 사이드 렌더링도 지원 (모두 같은 코드로 지원)
- Ajax 등과 같은 비동기 방식과 비교했을 때 검색 엔진 최적화(SEO) 등에 있어서 유리한 형태로 소스코드 작성 가능 (이러한 검색 엔진 최적화 문제는 상당수 SPA 프로젝트가 가지는 문제)
- 다른 라이브러리들과 함께 사용할 수 있어 효율적
- 무엇보다 리액트는 오픈소스 커뮤니티가 매우 방대하다는 장점
용어 설명
- 렌더링(Rendering): 웹 페이지 접속시, 그 페이지를 화면에 그려주는 것.
- 서버사이드렌더링(SSR): 서버 측에서 HTML & VIEW를 생성하여 응답하는 방법
- 클라이언트 사이드 렌더링(CSR): 클라이언트 측에서 View를 생성하는 기법
- SSR과 CSR의 초기 로딩속도 비교
- SSR은 View를 서버에서 렌더링하여 가져오기 때문에 클라이언트 입장에선 첫 로딩이 매우 짧다.
- CSR은 View를 서버에서 렌더링하지 않고 HTML을 받은 뒤 JS파일이나 각종 리소스를 다운 받은 후 브라우져에서 런더링하기 때문에 클라이언트 입장에서 초기 로딩이 길다.
- SSR과 CSR의 검색 엔진 최적화 문제(SEO : Search Engine Optimization)
- CSR은 View를 생성하는데 자바스크립트가 필요하고 그전까지 HTML의 내용은 비어있기에 웹 클로러들은 내용을 알 수가 없다. 따라서 SEO에 대한 문제가 발생한다. 반면에 SSR은 서버에서 View를 생성후 보여주기에 SEO에 유리하다
정리
- SSR은 초기 로딩속도가 빠르고 SEO에 유리하지만 View 변경시 서버에 계속 요청 해야 하기에 서버에 부담이 크다.
- CSR은 초기 로딩속도는 느리지만, 초기 로딩 후 서버에 다시 요청할 필요없이 클라이언트 내에서 작업이 이뤄지므로 매우 빠르다. 하지만 SEO에 대한 문제가 있다.