React, 왜 쓰는 것일까?
React는 현대 웹 환경에서 가장 많이 쓰이고 있는 대표적인 라이브러리입니다. 하지만 리액트가 탄생한 배경과 쓰이는 이유를 모른채로 단순히 요즘 대세니까, 요즘 많이 쓰이니까 등의 이유로 리액트를 배우고, 쓰곤 합니다. 사람들은 리액트를 어떤 목적을 가지고, 어떤 이유로 쓰게 되었을까요?
프론트 프레임워크를 쓰는 이유?
현대 웹 서비스 개발에 쓰이는 대표적인 프레임워크(혹은 라이브러리)는 React, Vue, Angular가 있습니다. 각각 개발방법도 다르고 React는 MVC중 View에만 집중하는 등 역할도 다르지만 큰 목적은 동일하다고 볼 수 있습니다. 즉 위 3개의 프레임워크들은 저마다의 장단점이 있지만 탄생한 배경은 비슷한 것입니다.
우선 본문에 들어가기에 앞서 미리 말해두자면, 현대 프론트엔드 프레임워크들이 하는 일들은 바닐라 JS로도 전부 구현가능합니다. 기존에는 DOM을 다음과 같이 조작하곤 했습니다.
var targetElement = document.querySelector('#target');
targetElement.addEventListener('click', handler);
var textElement = document.querySelector('#textEl');
var text = 'test text';
textElement.innerText = text;
text = 'new text'; // textElement 에는 다시 반영시켜줘야함위 코드처럼 목표로하는 DOM을 직접 찾아야 했으며, DOM을 조작하기 위해서는 개발자가 일일이 업데이트를 해주어야 했습니다. 단순하고 규모가 작다면 문제가 되지 않을 수 있지만, 웹 서비스의 규모가 점점 커지기 시작하면서 DOM의 양들이 많아져 연결되는 데이터들을 기억하기 힘들어졌고, 중복되는 코드들이 많아졌으며, 사용자와의 상호작용이 필요한 서비스가 많아지면서 정적인 DOM을 가진 웹 서비스에서 동적으로 DOM이 조작되는 일들이 많아졌습니다.
위와같은 문제들은 개발자들을 괴롭혔습니다. 특히나 유지보수 측면에서 큰 문제가 있었죠. 그리고 등장하게 된 것이 리액트를 필두로하는 프론트엔드 프레임워크들입니다. 그중에서도 이 글에서는 React가 이런 문제들을 어떻게 해결하였고, 왜 React를 쓰게되었는지를 이야기해 볼 겁니다.
가상 DOM
DOM(Document Object Model)이란 HTML 문서로부터 생성되는 인터페이스 입니다. HTML 문서의 구조화된 표현을 제공하여 Js가 DOM 구조에 접근할 수 있는 방법을 제공하게 됩니다. 직역하자면 DOM은 문서 객체이며, 이를 Js가 이용하여 웹 사이트를 조작하게 되는 것입니다.
(HTML의 DOM 트리)
미리 말해두자면, DOM은 느리지 않습니다. DOM은 충분히 빠르지만 웹 서비스의 규모가 커지면서 요소의 개수가 매우 커지기 시작했습니다. 여기까지는 DOM이 충분히 빠르기 때문에 문제가 없었지만, 상호작용을 통해서 DOM을 조작하기 시작하면서 문제가 발생했습니다. 웹 브라우저에서 DOM의 변화가 일어나게 되면 브라우저는 Reflow나 Repaint 과정을 거쳐 웹 페이지를 다시 그리게 됩니다. 예를들어, 10개의 요소가 변하게 된다면 10번의 렌더링과정을 거치게 되는 것입니다.
가상 DOM은 이를 해결하기 위해 나온 개념입니다. 말 그대로 가상 DOM은 HTML DOM의 추상화된 복사본으로 실제 DOM의 구조를 Js객체 형태로 표현됩니다. 이때 가상 DOM은 실제 렌더링 되지 않기 때문에 연산비용이 상대적으로 적게 듭니다.
React기반으로 작성된 웹 서비스는 DOM에 변화가 일어나게 된다면, 우선 가상 DOM을 업데이트하게 됩니다. 이후 업데이트 이전의 가상 DOM 스냅샷과 비교하여 정확히 어떤 부분이 바뀌었는지 검사하고, 바뀐부분만 실제 DOM에 반영하게 됩니다.
(가상DOM이 적용되는 과정)
작은 규모의 Reflow가 여러번 발생하는 것보다 큰 규모의 Reflow가 한 번 발생하는 것이 성능상에서 이점이 더 큽니다. React에서는 가상DOM을 아래와 같은 문법을 통해 간단하게 이용할 수 있습니다.
JSX
JSX란 JavaScript XML의 약자로, Js에 XML을 추가한 확장문법입니다. 리액트에서 사용되는 확장문법으로, 브라우저에서 실행하기 전에 Babel이 컴파일하여 Js코드로 변환합니다. 마치 HTML 태그처럼 생겼습니다. HTML 태그처럼 반드시 부모요소 하나가 감싸는 형태로 되어있습니다.
또한 내부적으로 Js 표현식을 중괄호{}로 감싸서 표현할 수도 있습니다. 단 if, while과 같은 Js 문장은 사용할 수 없습니다.
const TestComponent:React.FC = ()=>{
const testStr = "test"
return (
<div>
{testStr+" hello"}
</div>
)
}위 예시같은 간단한 React 컴포넌트에서 JSX를 리턴시키면, Babel은 JSX를 React.createElement() 호출로 컴파일합니다. JSX는 어디까지나 React.createElement(...)를 사용하기 위한 문법적 설탕이지만, 순수 Js로 쓰기에는 관리가 힘드므로 React 개발환경에서는 반드시 쓰인다고 보아도 좋습니다. 이렇게 만들어진 React elements는 React DOM을 위해 쓰이게 됩니다. 그리고 이렇게 생성된 React DOM은 React의 가상 DOM으로 보아도 무방합니다. 즉 사용자가 JSX를 통해 React elements를 생성하고 이를 Render시키면 React가 이를 통해 React DOM을 만들고, 가상 DOM의 역할을 하게 하는 것입니다.
컴포넌트
컴포넌트란 디자인이나 기능단위로 묶인 재사용가능한 단위를 의미합니다. 컴포넌트는 독립된 모듈로, 사용자는 내부구조에 신경쓰지 않고 재사용할 수 있게됩니다. 이를 통해 규모가 큰 서비스에서도 수월하게 코드를 재사용할 수 있게 됩니다.
<div>
<img src="#" alt="alt message" />
<div>
<p>img message</p>
</div>
</div>위와같은 모양을 반복하기 위해서 바닐라 Js를 사용한다고 한다면,
const container = document.createElement('div');
const img = document.createElement('img');
const messageContainer = document.createElement('div');
const imgMessage = document.createElement('p');
container.appendChild(img);
messageContainer.appendChild(imgMessage);
container.appendChild(messageContainer);같은 형식이 될 것입니다. 이번 예시같은 경우에는 간단한 형태이기에 망정이지 조금만 복잡한 구조가 되더라도 엄청난 수고가 될 것이라는 것은 눈에 선합니다. 이를 React를 통해 만들어봅시다.
const ImgComponent = ({imgSrc,altMessage,imgMessage})=>{
return (
<div>
<img src={imgSrc} alt={altMessage} />
<div>
<p>{imgMessage}</p>
</div>
</div>
)
}
....
<>
<ImgComponent imgSrc="/" altMessage="test image" imgMessage="message"/>
</>이렇게 간단한 코드로 재사용가능한 컴포넌트가 완성되었습니다. 이런식으로 컴포넌트 단위로 개발하는 것은 유지보수와 개발속도 측면에서 상당한 이득을 가져다 줍니다.
결론
간단히 정리하자면 점점 복잡해지고 사용자와의 상호작용이 많아진 현대 웹 서비스에서는 기존의 방법으로는 이를 개발/유지보수하기 힘들어 졌습니다. 따라서 가상DOM이나 컴포넌트 단위 개발을 가능하게 하는 프론트엔드 프레임워크(라이브러리)들이 등장하게 되었고, 현대 웹 서비스 개발의 대세가 된 것입니다.
React, Vue, Angular는 각각의 장단점이 있으므로 개발하려는 서비스와 자신에게 잘 맞는것을 선택하는 것이 중요합니다.
다음에는 React의 기본적인 개념에 대해서 설명하도록 해보겠습니다.
