다시 React?
코딩 부트캠프를 통해 가장 먼저 접한 프론트엔드 라이브러리가 React 였고, 인턴쉽 기간동안 스스로 공부하여 적용해가며 성취감을 안겨준 프레임워크는 Vue 다. 두 라이브러리/프레임워크 모두 훌륭하며 어떤 기술이든 두려움 없이 설레는 마음으로 공부할 수 있다.
그런데 지금은 구직활동을 하면서 채용시장을 보았을 때 리액트 개발자를 채용하는 기업이 많으며, 실제로 사용하며 모르는 것을 검색했을 때 다양한 자료가 검색되어 생태계가 활성되어있음을 느끼게 해주는 React 를 더욱 공부해보고 싶다.
React
리액트는 페이스북이 만든 사용자 UI 구축을 위한 라이브러리이다. 오직 사용자의 view 에만 초점을 맞추고 있다. 그래서 Routing 같은 기술이 리액트 자체에는 들어가 있지 않지만, 개발자들이 필요한 것들을 다양하게 만들어 놓아서 사실상 프레임워크라고 봐도 무방할 정도이다. 그만큼 리액트의 커뮤니티가 활발하다는 증거라고 할 수 있다.
React 특징
- JSX 문법
JSX 를 자바스크립트 안에서 html 문법을 사용해서 view 를 구성할 수 있게 도와준다. 리액트의 사용성을 증가시켜주는 대표적인 특징이다.
- component 기반
기존의 웹페이지를 작성할 때처럼 하나의 html 코드를 집어넣는 것이 아닌, 여러 부분을 분할해서 코드의 재사용성과 유지보수를 향상시켜준다.
- virtual DOM
DOM 의 구조는 트리 구조로 되어있다. 우리가 복잡한 SPA 개발을 통해 DOM 의 요소를 굉장히 많이 수정한다고 할 때, 불필요한 연산이 매번 일어난다.
그 문제를 해결하기 위해 가상 DOM 이 등장했다. 가상 DOM 은 변화를 가상 DOM 에서 미리 인지해 변화 시킨다. 이 작업은 실제 DOM 이 아니기 때문에 렌더링도 되지 않고 연산 비용이 실제 DOM 보다 적다. 그 가상 DOM 의 변화를 마지막에 실제 DOM 에게 던져주어, 모든 변화를 한번에 렌더링되게 한다.
만약 직접 DOM 을 업데이트하게 된다면 그 부분만 업데이트 하기 위해서 업데이트 하지 않은 부분과 업데이트된 부분을 알고 있어야 하는데, 가상 DOM 은 바뀌지 않은 부분과 바뀐 부분을 자동으로 감지해서 업데이트 시켜준다.
CRA
많은 사람들이 리액트를 작업할 때, webpack 같은 번들러를 이용해서 작업을 한다. 모든 모듈이나 여러가지 라이브러리를 동시에 합쳐서 하나의 .js 파일로 내보내는 것이다. 또한 리액트 파일은 JSX 문법으로 작성되거나 최신 js 문법으로 작성되기 때문에 babel 을 이용해서 브라우저 호환성을 생각해야 한다.
이러한 진입장벽을 해결하기 위해 페이스북이 create-react-app 을 지원하고 있다.
