리액트가 무엇인지 간단하게 살펴보고, 리액트의 특징에 대해 살펴보려고 한다.
리액트란?
-
리액트는 UI 자바스크립트 라이브러리이다.
싱글 페이지 애플리케이션의 UI(User Interface)를 생성하는데 집중한 라이브러리다. -
리액트는 JSX, 가상 돔, 단방향 데이터 바인딩, 선언형 프로그래밍, 컴포넌트 기반을 가장 큰 특징으로 뽑을 수 있다.
-
리액트는 싱글 페이지 애플리케이션에서 UI를 만드는 자바스크립트 라이브러리이다보니, 싱글 페이지 애플리케이션 제작을 하는 다른 프레임워크에 비해 부족한 부분이 있다. 예를 들어 리액트는 페이지 전환 기능을 제공하지 않기 때문에, 리액트를 사용하여 페이지 전환을 해야한다면, react-router와 같은 추가적인 라이브러리를 사용해야 한다.
리액트의 특징
1. JSX
리액트에서는 JSX라는 독특한 문법을 가지고 있다. JSX는 자바스크립트와 HTML을 동시에 사용하며, HTML에 자바스크립트의 변수들을 바로 사용할 수 있는 일종의 템플릿 언어(Template language)이다.
React는 JSX 사용이 필수가 아니지만, JS 코드 안에서 UI관련 작업을 할 수 있기 때문에 시각적으로 더 도움이 된다. 또한 JSX를 사용하면 React가 더욱 도움이 되는 에러 및 경고 메시지를 표시할 수 있게 해준다.
JSX는 브라우저에서 실행되기전 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다. 예시는 다음과 같다.
function App(){
return (
<div>
Hello <b>react</b>
</div>
);
}위의 코드는
function App(){
return React.createElement("div", null, "Hello", React.createElement("b", null "react"));
}아래와 같이 변환된다.
만약 컴포넌트를 렌더링할때마다 매번 React.createElement 함수를 사용해야한다면 매우 불편할 것이다. JSX를 사용하면 매우 편하게 UI를 렌더링할 수 있다.
2. 가상 돔
돔이란 무엇인가?
웹 페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델을 의미한다.
가상 돔
브라우저 렌더링 과정에서 DOM 조작으로 레이아웃 과정이 다시 진행되는 것을 리플로우(Reflow)라고 하며, 페인팅 과정이 다시 진행되는 것을 리페인트(Repaint)라고 한다.
이 리플로우와 리페인트는 DOM의 각 노드에 대한 연산 과정을 다시 수행함으로 이 과정이 많이 수행될수록 웹 서비스의 성능이 저하되는 문제가 발생하게 된다.
리액트는 이 리플로우와 리페인트가 자주 수행되는 문제를 해결하기 위해 화면에 표시되는 DOM과 동일한 DOM을 메모리상에 만들고 DOM 조작이 발생하면 메모리상에 생성한 가상 돔에 모든 연산을 수행한 후, 실제 DOM을 갱신하여 리플로우/리페인트의 연산을 최소화하였다. 그것을 가상 DOM이라고 한다.
3. 단방향 데이터 바인딩
양방향 데이터 바인딩은 사용자 UI의 데이터 변경을 감시하는 Watcher와 자바스크립트 데이터의 변경을 감시하는 Watcher가 UI와 자바스크립트 데이터를 자동으로 동기화 시켜주는 방식을 말한다. 이를 통해 프로그래머는 자바스크립트내에 데이터 변경과 사용자 UI에 데이터 변경에 관한 동기화를 신경쓰지 않고 프로그램을 작성할 수 있다.
하지만, 하나에 데이터 동기화에 두 개의 Watcher가 사용되고, 데이터 많아지게 되면 이 데이터의 동기화를 위한 수많은 Watcher가 생성되므로, 반대로 성능 저하가 발생할 수 있다.
이런 문제들 때문에, 리액트에서는 다른 프레임워크와는 다르게 단방향 데이터 바인딩을 사용한다.
단방향 데이터 바인딩은 단 하나의 Watcher가 자바스크립트의 데이터 갱신을 감지하여 사용자의 UI 데이터를 갱신한다. 사용자가 UI를 통해 자바스크립트의 데이터를 갱신할 때는, 이벤트를 통해 갱신하게 된다.
이처럼 단방향 데이터 바인딩은 하나의 Watcher를 사용하기 때문에 양방향 데이터 바인딩이 가지는 성능적인 이슈를 해결하고 더 확실하게 데이터를 추적할 수 있게 해준다.
4. 선언형 프로그래밍
프로그래밍에는 명령형 프로그래밍과 선언형 프로그래밍으로 구별할 수 있다.
명령형 프로그래밍은 프로그래밍을 할 때 어떻게(How)에 집중하는 것을 말하며
선언형 프로그래밍은 무엇(What)에 집중하여 프로그래밍을 하는 것을 말한다.
예를 들어 택시를 타고 집으로 돌아가는 과정을 명령형 프로그래밍으로 설명하면
“첫 번째 사거리에서 우회전하고 삼거리가 나올 때까지 직진한 후, 삼거리에서 좌회전하면 우리 집입니다”와 같이 어떻게 집으로 돌아가는지에 집중하여 설명한다.
하지만, 선언형 프로그래밍으로 이 과정을 설명하면 “우리 집은 00아파트 입니다”와 같이 집이라는 어떤 것에 집중하여 설명하게 된다.
JSX 자체가 선언형은 아니다. 하지만 JSX의 캡슐화를 통해 선언형 코드 작성이 가능해진다. 아래 코드를 보면 이해가 쉬워진다.
const App = () => {
<Nav />
<Menu />
<Detail />
}
개발자는
, , 의 렌더링되는 과정까지 알 필요가 없으며 컴포넌트 관련 작업만 신경쓰면 된다.5. 컴포넌트 기반
컴포넌트는 재사용을 할 수 있으며 이런 재사용을 통해 개발 생산성을 향상시킬 수 있다. 또한 이렇게 작고 고립된 컴포넌트는 테스트하기 쉬워 코드를 유지보수하는데도 크게 도움이 된다.
const Title = () => {
return <h1>This is Title.</h1>;
};
const Button = () => {
return <button>This is a Button</button>;
};
const App = () => {
return (
<div>
<Title />
<Button />
</div>
);
};