React가 무엇인가?
`React`는 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리이다. 특별히 `React`는 SPA 라이브러리(Single Page Application)이다. 이때 `React`는 프레임워크가 아닌 "라이브러리"에 속하는데 프레임워크와 라이브러리의 차이는 다음과 같다.
- 프레임워크(Framework): 개발을 위한 기본 틀, 뼈대
- 라이브러리(Library): 개발에 필요한 도구 또는 그 집합
`React`는 라우팅과 같은 프레임워크로서 갖춰야 할 기본적인 요소들을 모두 갖추고 있지는 않기에 프레임워크에 속하지 않고 라이브러리에 속한다.
React를 배워야 하는 이유
그렇다면 `React`를 배워야 하는 이유는 무엇일까? 대표적으로 2가지의 장점 때문이다.
- 트렌드이다: React는 이미 Web 개발에 있어 매우 많은 회사들에서 쓰이며 수요가 많다. 그로 인해서 React 생태계는 매우 방대하며 커다란 커뮤니티가 이미 형성되어있다.
- 편하다: React는 Single Page Application 라이브러리이며, 화면을 컴포넌트 단위로 쪼개고 재사용하는 식으로 코드 관리하기 용이하다. 그리고 React를 위한 유용한 라이브러리도 매우 많기에 개발하기에 편하다.
React가 트렌드가 된 이유
`React`를 배워야 하는 이유 중, "트렌드이다."가 있었는데, `React`가 트렌드가 된 이유는 무엇일까?
일반적인 웹서비스 방식에서는 “모든 페이지에 대한 네트워크 요청”을 진행한다. 이에 따라 코드의 양이 늘어나고 페이지에 진입할 때마다 반복적으로 다운 받아야 하는 리소스도 늘어난다.
그런데, `React`는 "SPA 방식(Single Page Application)" 방식으로 동작하는데, SPA 방식은 클라이언트에서 화면을 그리는 방식이다. 즉, JavaScript를 통해 동적으로 HTML을 생성한다. 이로 인해 페이지 전환 시 새로고침이 되는 것이 아니라 JavaScipt에 의해 화면의 콘텐츠만 바뀐다. 이러한 SPA 방식으로 동작하기에 조금 더 부드럽고 전환이 깔끔한 웹페이지 구현이 가능하다.
React의 특징
`React`의 특징은 다음과 같다.
컴포넌트 기반 설계
NOTE!
컴포넌트: 스스로 상태를 관리하는 캡슐화된 코드 조각
`React`의 가장 핵심적인 특징은 바로 "컴포넌트 기반 설계"이다. 코드 조각으로 분류하여 재사용성과 유지 보수성을 증가시킨다. 이때, 컴포넌트는 의미 단위로 구성되며 부모와 자식 관계를 가진다.
가상 돔 (Virtual DOM)
DOM(Document Object Model)이란 웹 문서의 구조화된 표현으로 자바스크립트가 웹 페이지의 요소를 선택하고 수정하고 추가하거나 제거할 때 사용된다. 그렇다면 가상 DOM은 무엇일까?
NOTE!
가상 DOM: 실제 DOM의 복사본으로 SPA에서의 동적인 변화를 효율적으로 관리하기 위해 사용된다.
JavaScript를 이용하여 HTML을 동적으로 변경할 때, 브라우저가 DOM을 다시 재구축하고 화면을 그리는 과정을 거치는다. 그런데 이 과정은 상대적으로 빠르지 않아 잦은 DOM 변경은 웹서비스의 성능 문제를 야기한다.
이러한 문제를 해결하기 위해서 `React`에서는 가상 DOM을 만들고 변경되어야 할 DOM 요소들을 모두 가상 DOM에 적용시키고, 실제 DOM에 동기화시키는 방식으로 동작한다. 이렇게 동작하면 DOM 변경이 잦아지지 않기에 훨씬 성능이 뛰어난 웹 서비스를 구축할 수 있다.
클라이언트 사이드 렌더링 (Client Side Rendering)
`React`는 위에서 말했듯, SPA 방식이기에 자바스크립트를 통해 서버가 아닌 클라이언트, 브라우저에서 화면을 그린다. 클라이언트 사이드 렌더링(CSR)의 동작 방식은 다음과 같다.
- 서버는 HTML 껍데기와 함께 JavaScript 파일을 클라이언트(브라우저)로 전송한다.
- 브라우저는 전송받은 HTML을 로드한 후 JavaScript를 실행하여 콘텐츠를 동적으로 생성하고 페이지를 완성한다.
페이지 간 전환이 서버 요청 없이 이루어지기에 매우 빠르게 반응한다. 그러나, 페이지를 처음 로드할 때, 브라우저가 JavaScript를 다운로드하고 실행해야하기에 초기 로딩 속도가 느리고, SEO에 취약하다.
