왜 React를 써야 하나?

안녕하세요 오늘은 JS를 이용한 라이브러리 중 가장 인기가 많은 React에 대해 알아보겠습니다.

1. React?

현재 JS를 이용한 프레임워크와 라이브러리를 포함해 React는 가장 인기있는 툴입니다. 왜 리엑트는 이렇게 많은 사람들이 사용하는 것일까요? 바로 생산성이 매우 뛰어나기 때문입니다. 리엑트는 복잡해지는 웹의 환경과 급증하는 데이터, 사용자와의 인터렉션을 해결하기 위해 페이스북이 2013년 개발했습니다. 페이스북에선 증가하는 유저들의 정보를 효과적으로 관리하고 UI 관리를 편하게 하기 위해 React를 만들었죠. 지금은 구글이 만든 Anguler, 그리고 개인이 개발한 Vue와 함께 가장 인기있는 UI 툴이 되었습니다. Vue가 쉽고 유연한 툴로서 큰 인기를 얻고 있지만, 아직까지 React의 시장 지배력을 넘지는 못하고 있죠. 또한 리엑트는 페이스북이 지속적으로 관리하면서 그 안정성도 점차 늘어나고 있습니다.

2. Why React?

리엑트는 가상돔을 이용한 UI 개발 도구입니다. DOM에 직접 접근하는 바닐라 자바스크립트보다 빠르게 업데이트가 가능하고 유연한 후속관리가 가능합니다. 이를 이용해 절차적인 과거의 웹에서 선언적인 리엑트 환경으로 넘어갔다고 하는데요. 과거 웹 환경은 모든 절차를 그대로 진행해 만약 하나라도 망가진게 있다면 모든 절차를 반복해 오류를 찾아냈죠. 리엑트는 가상돔과 컴포넌트라는 요소를 이용해 빠뜨린 부분은 요소별로만 추가해주면 됩니다. 모든 절차를 반복할 필요 없이 선언만 수정하면 되기 때문에 선언적이라고 불립니다. 때문에 돔자체에 접근할 때 중요하던 절차보다, 수정되는 데이터 자체에 더 중요성이 생겼죠.

3. 리엑트 관련 용어

리엑트를 이해하기 위한 몇 가지 용어들을 알아볼까요?

• 프레임 워크: 남들이 만들어 놓은 코드를 뜻합니다. Angular 같은 툴이 프레임 워크입니다.
• 라이브러리 : 남들이 만든 코드이지만 이용자의 취향에 따라 이용이 좀 더 자유롭다는 차이가 있습니다. 리엑트도 라이브러리입니다.
• Node.js: 노드.js는 웹 브라우저 이외의 환경에서 자바스크립트를 활용하도록 해줍니다. 리엑트 이해에 필요한 이유는 노드를 받으면서 npm이 자동 다운로드됩니다. 이 npm을 통해 리엑트 환경을 다운로드 가능합니다.
• CRA: create-react-app의 약자입니다. 이를 통해 리엑트 초심자의 경우 기본 환경 세팅을 할 수 있습니다. 후에 심화 과정에서는 본인이 환경을 구축해야 합니다. 그러나 Single Page App 같이 단순한 구조의 어플리케이션은 CRA만으로도 충분합니다.
• Node_modules : CRA를 통해 다운받으면 최상위 폴더에 있을 겁니다. 우리가 만든 모든 소스코드가 이곳에 저장됩니다. 너무 크기 때문에 깃허브에 업로드 되지 않도록 막혀있습니다. 그러나 package.json에 적힌 dependencies에 따라서 npm install을 통해 다운로드 가능하기 때문에 굳이 매번 올릴 필요가 없는 것이죠.
• JSX : 자바스크립트 언어를 이용해 HTML과 CSS도 작성이 가능한 JS 확장 문법입니다. 리엑트 내부에선 JSX를 이용해 render할 HTML 구조를 만들죠.