React는 페이스북에서 제공하는 자바스크립트 UI 라이브러리다. 즉 React 프론트엔드 라이브러리다. Angular가 프레임워크인 데 반해 React는 라이브러리다. 즉, 웹을 만드는 데 꼭 필요한 도구들이 전부 기본적으로 제공되지 않는다. 그런만큼 가볍고, 선택의 폭이 넓다.
React는 컴포넌트 기반이다. 컴포넌트에 데이터를 흘려보내면 설계된 대로 UI가 조립되어 사용자에게 보여진다.
리액트를 사용하는 이유
React를 사용하면 사용자와 상호작용할 수 있는 interactive한 UI를 쉽게 만들 수 있다. React를 사용하면 기능과 UI 구현에 집중하고 불필요한 주의력 분산을 줄일 수 있게 된다.
또, React를 사용하면 브라우저 전체를 새로고침 하지 않고도 컨텐츠를 빠르게 변경할 수 있다
React의 작동방식
React는 이벤트로 인해 데이터를 관리하는 Model에 변화가 생기면 Virtual DOM을 생성한다. 이후 Virtual DOM과 실제 DOM을 비교하고, 변화가 발생한 부분만 업데이트 한다.
Virtual DOM
DOM은 Document Object Model의 약자이다. DOM은 html, xml, CSS 등을 트리 구조로 인식하고 데이터를 객체로 간주해 관리한다. html 코드를 브라우저에서 열게 되면 DOM이 브라우저에서 보이는 View를 만드는 식이다.
왜 Virtual DOM인가?
Virtual DOM을 사용하면, 실제 DOM에 적용시키기 전 가상의 DOM을 만들어 적용시키고, 최종 완성된 결과만을 실제 DOM으로 전달한다. 이를 통해 브라우저가 진행하는 연산의 양을 줄일 수 있어 성능이 개선된다
React의 특징
Flux 패턴과 단방향 데이터 바인딩
React는 양방향 바인딩이 전제되는 MVC 패턴과는 다른 특징을 보인다. 페이스북에서 Flux라고 부르는 패턴이 적용되어 있는데, 단방향 바인딩이 특징이다.
Component 기반 구조
React는 UI(혹은 View)를 여러 컴포넌트(Component) 쪼개서 만든다. 한 페이지 안에서도 Header, Footer 등 각 부분을 독립된 컴포넌트(Component)로 만들고, 컴포넌트들을 조립해 화면을 구성한다.
컴포넌트 기반이라는 점은 React의 큰 장점이다. 여러 화면에서 재사용되는 코드를 반복해 입력할 필요 없이 컴포넌트만 임포트해 사용하면 된다. 또, 기능단위, UI단위로 쪼개어 코드를 관리하므로, 어플리케이션이 복잡해져도 코드의 유지보수가 용이하다.
언제 React를 써야 하는가
웹 기반 계산기를 만든다고 가정하자. 2+2의 답을 사용자에게 알려주는 데에는 굳이 서버를 거쳐야 할 이유가 없다. 브라우저도 충분히 연산을 해낼 수 있다. 따라서 계산의 내용을 서버로 보내고, 서버가 이를 기록한 후 계산 결과를 반환하는 방식은 비효율적이게 된다.
한편, 블로그처럼 순수하게 정적인 사이트를 만든다면 서버에서 html을 일괄 생성하고 이를 클라이언트에게 전달하는 것이 단순하고, 로딩 속도를 개선할 수 있다.
React는 정적인 사이트보다는 동적인 사이트에 필요하고 어울린다. 정적인 사이트에서도 React를 사용할 수 있지만 보일러 플레이트 코드를 구현하고, 서버 사이드 렌더링을 통한 SEO나 라우팅 등을 구현하는 것은 몸에 맞지 않는 큰 머리처럼 비효율적이다.
