[React.js] React.js 의 세가지 특징
안녕하세요. 아르나입니다.
필자가 가장 잘 사용하고있고 현업에서 다루고있는 React.js 의 커다란 세가지 특징을 한번 알아보겠습니다.
1. JSX 문법
JSX 문법은 자바스크립트안에서 HTML 문법을 사용해서 view 를 구성할 수 있는 문법입니다.
class HelloWorld extends React.Component {
render() {
return (
<div>Hello World</div>
);
}
}
React 를 다루다보면 이런 코드를 볼 수
있는데요. return 안에 아주아주 익숙한 코드가 보이시죠? 아마 HTML 코드 작업을 하면서 보셨을거에요. JSX 를 이용하면 이와같은 문법을 사용할 수 있습니다.
2. Component 기반
Component 기반이라고 하면 어렵다고 생각 할 수 있는데요. 필자같은경우는 원래 웹 개발자가 아니고 객체지향 언어를 사용하고있었어서 용어만 다를 뿐 원래 사용하던 기능이라는것을 알았습니다.
쉽게 설명하자면 아주아주 긴 HTML 코드를 필요에따라 블럭처럼 부분부분 떼어내서 조립식으로 사용 할 수 있게하는 것입니다.
예를들어 메모장의 기능을 만든다고 생각해봅시다. 그중 글씨의 크기조절, 글씨의 굵기조절, 글씨의 색상조절등의 기능이 있다고 하면 이 모든 기능을 HTML 하나에 다 넣을 수도 있겠지요.
Component 기반이라함은 이 글씨 크기 조절, 글씨 굵기 조절, 글씨 생상 조절 을 따로 떼어내서 만드는것입니다. 이렇게 필요한 기능들을 Component 로 따로 분리를 해둔다면 필요에 따라 다른 코딩에서도 이용할 수 있겠지요.
만약 또 다른 페이지에서 글씨 크기 조절만 필요하다면 글씨 크기 조절 Component 만 따로 이용할 수 있을겁니다. 이런식의 코드 재활용성이 높아지고 HTML 의 코드를 보기좋게 만들 수 있는 기능중에 하나입니다.
3. Virtual DOM
마지막으로 가상돔 (Virtual DOM) 입니다. 해당 기능은 웹 개발자로서 면접을 볼 때 가장 많이 얘기했던 특징중에 하나인데요.
HTML 단위들을 객체로 생성한 모델을 DOM (Document Object Model) 이라고 보시면 될 것 같은데요. document 안에 html의 태그들 <html>, <body>, <div> 등 을 생각하시면 될것같습니다. 이 요소들을 수정한다고 했을 때 DOM이 수정하지않은 부분까지도 다시 계산을 진행하고 랜더링을 진행하게됩니다.
딱 여기까지 읽고 눈치채신 분들이 계실거에요. 만약 우리가 수정을 많이 진행하게된다면 불필요한 연산이 점점 더 많아저서 속도에 문제가 생길 수 있겠지요.
가상돔 덕준에 이부분이 해결되었다고 합니다. 가상돔은 이러한 수정사항에 의한 변화들을 미리 인지해서 가상돔에서 변화시킵니다. 실제 돔이 아니고 가상돔에 적용한것이여서 랜더링이 되지않아 계산값이 많이 들어가지 않습니다. 이렇게 가상돔에서만 적용된 부분을 실제 돔에 한번에 전달하여 랜더링 횟수를 적게 함으로서 성능을 올릴 수 있어요.
이게 가능한 이유는 가상돔은 수정된 부분과 수정되지 않은 부분을 자동으로 감지하여 업데이트하기때문입니다. 사실 필자가 작업을하면서 속도나 계산값에 해당하는 부분은 느껴보지 못했지만 그렇다고하니 알아두는것은 좋을것 같아요.