[React] React란 무엇인가

프론트 프레임워크/라이브러리

리액트는 정말 인기있는 프론트엔드 라이브러리이다. 일단, 웹사이트를 만들기 위해선 사실 프론트엔드 라이브러리의 도움 없이도 만들 수 있다. 그리고 단순히 정적 페이지를 만들기 위해선 자바스크립트 없이도, HTML 과 CSS 를 사용해서 만들면 된다. 하지만 우리는 사용자의 행동에 의거한 동적 페이지를 만들기 위해 자바스크립트를 사용한다. 우리는 브라우저 상으로도 정말 자연스러운 흐름으로 매우 많은것들을 할 수가 있는데, 어떠한 유저인터페이스를 동적으로 나타내기위해서는 정말 수많은 상태를 관리해야 한다.

작은 규모의 프로젝트에선 앞서 설명한 기술로 충분히 멋진 웹 사이트를 만들 수 있다. 하지만 프로젝트가 규모가 커지고, 다양한 유저 인터페이스와 인터랙션을 제공하게 된다면, 모든 DOM 요소를 직접 관리하는 것은 점점 더 힘들고 번거로울 것이다. 웹 개발을 할 때, 이러한 귀찮은 DOM과 상태값 관리를 최소화하고, 기능과 UI만을 구현하는 것에 집중하기 위해 다양한 프론트 프레임워크와 라이브러리가 만들어졌다.

Virtual DOM

Virtual DOM은 말 그대로 가상의 DOM이다. 이는 상태값의 변화가 일어났을 때, DOM이 즉시 리렌더링되는 것이 아닌 Javascript로 이루어진 가상 DOM에 먼저 렌더링한 후 실제 DOM과 비교한 후, 변화가 필요한 부분만 업데이트를 하는 것이다. Virtual DOM은 DOM 변화를 최소화 시켜주는데, 이 횟수를 최소화시키는 것은 성능에 있어서 굉장히 큰 이슈이다. React는 이 Virtual DOM 기술을 통해 가장 빠르진 않지만 충분히 빠른 웹 UI를 제공한다. 물론 React가 이 기술의 선발주자이지만, React만이 사용하는 것은 아니다. React를 특별하게 만들어주는 이유는 다음과 같다.

• 현재 React의 인기는 JQeury가 처음 등장했을 때와 같다. 때문에 React 라이브러리는 상당히 많이 개발되었으며, 일반 JQuery, Javascript로 개발된 라이브러리들도 리액트를 포팅되어 작성되고 있다.
• React를 사용하는 기업이 많다. Airbnb를 시작으로 굉장히 많은 회사가 사용하는데, 현재 그 수가 가장 많지는 않지만, 현재 새로이 등장하는 프로젝트 혹은 리뉴얼 프로젝트는 리액트를 많이 채택하고 있는 추세이다.

이 포스트를 시작으로 앞으로 공부하는 React 라이브러리에 대하여 꾸준히 공부한 내용을 포스팅할 것이다.