리액트 시작하기
리액트(React) 소개
리액트는 페이스북과 인스타그램 개발자들이 만든 UI 라이브러리이다. 2013년 처음 공개됐으며 MVC(Model View Controller) 패턴에서 V(View)에 집중되어 있다. 뷰에서 사용되는 여러 개의 컴포넌트를 관리하고 만드는 것이 리액트이다.
컴포넌트는 웹 사이트를 구성하고 있는 요소를 의미한다. HTML로 비유하면 <header>, <nav>, <footer> 등 웹 사이트 페이지별로 들어가는 공통된 영역을 말한다. 이들을 미리 리액트로 컴포넌트화하면 페이지별로 필요한 컴포넌트를 조립하는 방식으로 쉽고 빠르게 결과물을 만들 수 있다. 즉, 리액트는 여러 개의 컴포넌트를 제작하여 이를 조립하고, 수정하고, 재활용하기 편하도록 관리해주는 라이브러리이다.
쉽게 설명하면 레고의 블록처럼 여러 개의 부품(=컴포넌트)을 조립하여 하나의 결과물(=웹 서비스)을 만들 수 있도록 도와주는 도구라고 생각하면 된다.
DOM과 가상(Virtual ) DOM
자바스크립트의 DOM(Document Object Model)은 문서 객체 모델이라고 얘기한다. 문서 객체란 <h1>, <p>, <li> 등 HTML 태그들을 자바스크립트로 적용할 수 있는 객체로 만드는 것을 말한다. 예를 들어, 표준 DOM에서는 문서 안에서 모든 <P> elements에 대한 list를 리턴하는 getElementsByTagName method를 정의하고 있다.
var paragraphs = document.getElementsByTagName("P");
// paragraphs[0] is the first <p> element
// paragraphs[1] is the second <p> element, etc.
alert(paragraphs[0].nodeName);
위의 예제는 DOM을 사용하여 문서(document)와 문서의 요소(element)에 접근하기 위해 자바스크립트를 사용했다. DOM은 개발 언어는 아니지만 DOM이 없으면 자바스크립트 언어는 HTML, XML와 같은 문서 안의 정보에 접근할 수 없다.
JavaScript DOM Tree리액트에서 사용되는 가상 DOM은 자바스크립트 메모리에만 존재한다. 만약 데이터를 추가하거나 변경하는 작업을 진행하면 리액트는 가상 DOM에 먼저 적용하여 비교한 후 변경이 필요한 부분만 실제 DOM에 반영한다. 결과적으로 리액트는 꼭 필요한 부분만 반영하고, 가상 DOM과 실제 DOM을 같게 만든다.
가상 DOM과 DOM리액트 공식 홈페이지에서는 가상 DOM을 어떻게 정의하고 있는지도 함께 살펴보자.
가상 DOM은 실제 DOM이 갖고 있는 성능상의 문제를 해결하기 위해 등장했다. 만약 실제 DOM의 변경 사항이 많다면 이를 적용하는 데 많은 시간이 소요된다. 하지만 리액트는 모든 변경 사항을 가상 DOM에서 먼저 처리하고, 변화가 있는 부분만 실제 DOM 안에 적용하기 때문에 실제 DOM이 갖고 있는 성능 문제를 어느 정도 해결할 수 있다.
SPA란 무엇인가?
SPA(Single Page Application)는 서버에서 페이지를 불러오는 것이 아니라 페이지를 동적으로 작성하여 불러오는 방식이다. 보통 웹 사이트는 페이지를 이동할 때마다 서버에서 HTML 코드를 전달받는다. 이러한 방식을 서버 사이드 렌더링이라고 한다. 하지만 메뉴나 <footer>와 같이 변하지 않는 정보도 계속 새롭게 받아야 하기 때문에 쓸데없는 데이터가 낭비되기도 한다.
SPA는 이러한 부분들이 처음 웹 사이트 접속 시 한 번만 요청되고 페이지 이동시는 실제로 페이지를 이동하는 것이 아니라 뷰 부분만 데이터를 받아서 렌더링하기 때문에 속도가 빨라진다 서버에서 불필요한 코드가 계속 요청되는 일도 없어 대부분의 작업이 클라이언트상에서 일어나기 때문에 트랙픽도 많이 줄게 된다.
정리하면 페이지를 변경할 때마다 서버에 요청하는 것이 아니라 최초 접속 시 한 번에 페이지 전체를 불러온 다음 변경이 필요한 영역만 변화를 주는 것이 SPA이다. 리액트는 SPA 방식에 특화된 '라이브러리'이다. 위에서도 언급했듯이 실제 변화가 일어나는 부분에만 변화를 주기 때문에 쓸데없는 리소스가 들어갈 일이 없다.
리액트는 프레임워크인가? 라이브러리인가?
결론부터 얘기하면 리액트는 라이브러리이다. 이는 리액트 공식 사이트 메인 화면에도 적혀있다.
사전적 의미를 보면 라이브러리(Library)는 도서관을 뜻한다. 자주 사용되거나 재사용이 필요한 기능을 언제든지 호출해서 사용할 수 있도록 Function이나 Class로 만들어진 것을 라이브러리라고 얘기한다. 대표적인 자바스크립트 라이브러리로는 "jQuery"가 있다.
프레임워크(Framework)란 뼈대를 말한다. 원하는 기능에만 집중하여 빠르게 개발을 진행할 수 있다. 기본적으로 필요한 모든 기능을 갖추고 있으며, 라이브러리가 포함되어 있다. 만약 프레임워크에서 제공하지 않는 기능을 추가할 때는 프레임워크에서 정한 규칙을 준수하여 개발해야 한다.
아래 링크에서는 라이브러리를 도구, 프레임워크를 운송 수단으로 비유하여 자세히 설명하고 있으니 꼭 읽어보기 바란다.
앞에서도 언급했지만 리액트는 뷰 라이브러리이다. Angular.js와 Backbone.js는 라우팅, 모델, 컨트롤러까지 모두를 갖추고 있는 프레임워크이며, 리액트는 라우팅, 모델은 신경 쓰지 않고 오로지 뷰만 조작하기 때문에 라이브러리로 분류된다.
리액트 학습에 필요한 배경 지식
당연한 얘기지만 HTML, CSS, 자바스크립트에 대한 전반적인 지식이 필요하다. 추가로 리액트는 ECMAScript 6 문법을 사용하기 때문에, 이에 대한 배경 지식 또한 요구된다. HTML, CSS, 자바스크립트 기초 지식은 아래 채널에서 습득할 수 있다.
