리액트라는 라이브러리가 어쩌다 만들어졌는지 아는 것은 리액트를 이해하는 데 도움이 될 것이다.
JavaScript를 사용해서 HTML로 구성된 UI를 제어해 봤다면 DOM(Document Object Model) - 각 HTML element에 대한 정보를 지니고 있는 JavaScript 객체 -을 변형시키기 위해 우리가 어떤 작업을 해야 하는지 익숙할 것이다. DOM을 변형하려면 브라우저의 DOM Selector API를 사용해서 특정 DOM을 선택한 뒤 특정 이벤트가 발생하면 변화를 주도록 설정해야 한다.
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<h2 id="number">0</h2>
<div>
<button id="increase">+1</button>
<button id="decrease">-1</button>
</div>
<script src="src/index.js"></script>
</body>
</html>const number = document.getElementById("number");
const increase = document.getElementById("increase");
const decrease = document.getElementById("decrease");
increase.onclick = () => {
console.log("increase가 클릭됨");
const current = parseInt(number.innerText, 10);
number.innerText = current + 1;
};
decrease.onclick = () => {
console.log("decrease가 클릭됨");
const current = parseInt(number.innerText, 10);
number.innerText = current - 1;
};
위 예시는 숫자가 증가/감소하는 카운터를 HTML과 JS를 사용해 만든 것이다. 위와 같이 HTML이 구성되어 있고 id를 사용해 각 DOM을 선택한 뒤 원하는 이벤트가 발생하면 DOM의 특정 속성을 바꿔 준다. 따라서 만약 '+1' 버튼을 누르면 id가 number인 DOM을 선택해서 innerText 속성에 1씩 더해 주라는 규칙이 있다.
지금처럼 사용자와의 인터랙션이 별로 없는 웹 페이지라면 상관이 없겠지만, 만약 인터랙션이 자주 발생하고 이에 따라 동적으로 UI를 표현해야 한다면 이러한 규칙들은 더욱 다양해질 것이고 그만큼 관리하기도 어려워질 것이다. 또한 대부분의 경우 웹 애플리케이션의 규모가 커지거나 DOM을 직접 건드리면서 작업을 하면 코드가 난잡해지기 쉽다. 처리해야 할 이벤트도 다양해지고 관리해야 할 상태 값도 다양해지고 DOM도 다양해진다면 이에 따라 업데이트를 하는 규칙도 많아지기 때문이다.
따라서 조금 과장을 하면 위와 같은 형태의 코드가 될 수도 있다. 여기저기서 서로를 참조하게 되고 유지보수하기 어려운 코드가 만들어지기 쉬운 것이다.
이에 따라 Ember, Backbone, AngularJS 등의 프레임워크가 만들어졌다. 이 프레임워크들의 작동 방식은 각각 다르지만 이들은 자바스크립트의 특정 값이 바뀌면 특정 DOM의 속성이 바뀌도록 연결해서 업데이트하는 작업을 간소화해 주는 방식으로 웹 개발의 어려움을 해결해 주었다.
그러나 리액트의 경우 조금 다른 발상에서 만들어졌다. 리액트는 어떠한 상태가 바뀌었을 때 그 상태에 따라 DOM을 어떻게 업데이트할지 규칙을 정하는 것이 아니라, 아예 다 날려버리고 처음부터 모든 걸 새로 만들어서 보여준다면 어떨까? 하는 아이디어에서 시작되었다.
그러면 업데이트를 어떻게 해야 할지에 대한 고민을 전혀 안 해도 되기 때문에 개발이 정말 쉬워질 것이다. 하지만 정말로 동적인 UI를 보여주기 위해 모든 걸 새로 만든다면 속도가 굉장히 느려진다는 문제가 생길 수 있다. 작은 웹 애플리케이션이라면 상관이 없겠지만 규모가 클수록 그 어려움은 커질 것이다.
하지만 리액트에서는 Virtual DOM이라는 것을 사용해서 성능을 지켜가면서도 이를 가능하도록 했다.
Virtual DOM이란 가상의 DOM으로, 브라우저에서 실제로 보이는 DOM이 아니라 메모리에 가상으로 존재하는 DOM으로서 그저 자바스크립트 객체이기 때문에 작동 성능이 실제로 브라우저에서 DOM을 보여주는 것보다 속도가 훨씬 빠르다.
리액트에서는 상태가 업데이트되면 업데이트가 필요한 곳의 UI를 Virtual DOM을 통해서 렌더링한다. 그리고 나서 리액트 개발팀이 만든 매우 효율적인 비교 알고리즘을 통해 실제 브라우저에서 보이고 있는 DOM과 비교한 후, 차이가 있는 곳을 감지하여 이를 실제 DOM에 패치- 차이를 확인해서 필요한 변화를 반영 -시켜 준다.
이를 통해 정말 필요한 변화만 발생시키면서 업데이트를 어떻게 할지에 대한 고민을 하지 않으면서도 빠른 성능을 지켜낼 수 있게 된 것이다.
따라서 앞으로 리액트를 사용해 웹 애플리케이션을 개발할 때는 UI를 어떻게 업데이트할지에 대한 고민은 하지 않고 UI를 어떻게 보여줄지 또는 UI가 어떻게 보여야 하는지에 집중해 프로젝트를 진행하게 될 것이다.
리액트에서는 UI를 컴포넌트라는 것을 사용해 선언하게 되는데, 여기서 컴포넌트는 쉽게 말해 UI의 조각이라고 이해하면 좋다. 인풋이 있으면 아웃풋을 만들어내는 UI의 조각인 것이다.
const Hello = ({name}) => <div>Hello, {name}</div>
컴포넌트에는 다양한 기능들이 들어 있으며, 이에 대해서는 앞으로 더 자세히 알아보도록 하겠다.
※ 위 내용은 패스트캠퍼스에서 제공하는 React Online Tutorial을 토대로 정리한 글입니다.
참고 자료
김민준(2020). 리액트를 다루는 기술, 개정판. (주)도서출판 길벗.
react.vlpt.us/basic/01-concept.html
'Javascript > React' 카테고리의 다른 글
| [React] JSX 문법 (0) | 2020.12.28 |
|---|---|
| [React] 첫 번째 리액트 컴포넌트 (0) | 2020.11.29 |
| [React] styled-components 모듈 사용하기(조건 , 외부,상속) (0) | 2020.10.29 |
| [React] Components refactoring (0) | 2020.10.27 |
| [React] Redux 특징 및 설치법 (0) | 2020.10.27 |
