부트캠프기간 중 지난 약 두 달간 Javascript '라이브러리'인 React를 계속해서 썼다. 사실 커리큘럼에 포함된 거라 프로젝트에 쓴 것 일뿐 왜 쓰는지는 모르고 썼었다. 개발이 많이 진전되었을 때 쯤에 왜 내가 이걸 쓰고 있는지가 궁금해지기 시작했다. 소프트웨어 공학 전공 학생으로서 아직 학부에서 배워야 할 언어가 많이 있고, 세상에 나와있는 언어도 무수히 많다는 것을 알고 있다. 그런데, 왜 굳이 React를 배웠고, 왜 쓰고 있는 지를 이곳 저곳에서 찾아보고 공감하였다.
React는 페이스북에서 만든 javascript 라이브러리이다. 프레임워크가 아닌 라이브러리. Router와 같은 웹을 만드는 데 필요한 도구들이 기본적으로 포함되지 않는다. 그래서 가볍다고들 많이 표현하고, learning curve가 다른 언어들에 비해 높지 않다. (그래도 React도 쓰면 쓸 수록 어렵긴하다.)
React는 크게 세가지의 특징을 갖고 있다.
Component
컴포넌트 별로 개발 한다는 말을 들어 본 적이 한번 쯤은 있을 수 있다. 브라우저 화면상에 보이는 하나하나의 버튼, 탭, 아이콘 등이 모두 컴포넌트(구성요소)라고 보면 된다. 이 것들이 모두 모여 하나의 뷰를 완성한다. 그래서 대부분 분리되어 있어, 재사용이 편리한 것이 React의 컴포넌트이다. Redux의 창시자인 Dan Abramov라는 사람이 React는 유지가능한 앱을 만드는 것에 있다고 말한적이 있다.
JSX
JSX는 얼핏보면 div와 같은 태그를 써서 HTML 문법과 매우 비슷한데, 사실 React에서 쓰이려고 만들어진 자바스크립트 문법이다.
예를 들어보자면,
class HelloWorld extends Component {
render ( ) {
return ( <div>Hello world!!!</div> );
}
}
ReactDOM.render(<HelloWorld />, App);
과 같이 쓸 수 있다.
JSX는 바로 브라우저가 인식하지 못하고 Babel과 같은 트랜스파일러가 컴파일을 해주어야 인식을 할 수 있게 된다. 그런데도 JSX가 쓰이는 이유는 HTML과 문법이 비슷하여, 한눈에 자신이 짠 코드가 어떤 모습일 지 쉽게 상상이 가능하기 때문이다. 한마디로 그 컴포넌트가 리턴하는 JSX 코드가 직관적이라는 뜻이다, 그래서 개발자가 결과물에 대해 어느정도 예측을 할 수 있고, 유지보수와 협업에도 용이한 장점이 있다.
Virtual DOM
일반적으로 React 하면 가장 유명한 것이 Virtual DOM 이다. DOM은 웹의 핵심으로서, 브라우저가 화면을 그리기 위한 정보가 담겨있는 문서이다. 기존의 DOM은 페이지가 바뀔 때마다, 새 HTML파일을 로드하면서 DOM 전체를 바꾸게 되는데, Virtual DOM은 React 컴포넌트가 리턴 하는 값에 의해 만들어져서 React 가 실제 보여지고 있는 DOM과 비교를 하여 달라진 부분만 찾아내어 바꾸게 된다. 이 작업이 바로 DOM 전체를 바꾸는 것보다 훨씬 더 비용이 적게 든다. 이러한 Virtual DOM 때문에 React에서 컴포넌트 단위의 개발이 가능해진다.
결론
위 세가지 React의 큰 특징를 정리해보자면,
1. 컴포넌트 별로 따로 분리되어 있어서 재사용이 용이하고 유지보수가 가능하다.
2. JSX라는 React의 문법이 HTML과 비슷하여 예측가능한 개발이 가능하다.
3. Virtual DOM이 바뀐 부분만 새로 데이터를 로드해주어서 효율적인 DOM 제어가 가능하다.
이러한 이유들로 React를 사용한다고 생각하게 되었다.