🤷🏻‍♀️ React는 무엇인가?

자바스크립트 라이브러리 이며 페이스북의 소프트웨어 엔지니어 Jordan Walke가 개발하였다.

👀 React를 사용하는 이유?

React를 사용하는 이유를 물어본다면 단순하게
🙋‍♀️"인기 있는 라이브러리잖아?"
🙋‍♀️"많은 기업에서 요구하는 스펙이잖아?"
라고 할 수 있겠다. 나 또한 처음 그랬기 때문이다.

HTML, CSS, 순수JavaScript로 웹페이지를 충분히 제작할 수 있지만 웹이 점점 발전하면서 '웹 어플리케이션' 이라고 불릴 정도로 동적인 웹페이지가 늘어나고 복잡해졌다. 그러자 자바스크립트 파일의 관리가 어려워졌을 것이다. 또한 아무리 파일들을 따로 만들어 관리를 하더라도 페이지 간 이동을 할때마다 HTML, CSS, JavaScript 파일을 서버와 주고받아야 하기때문에 속도가 느릴 수 밖에 없었으니까 말이다.

👀 효율적으로 관리하는 방법은?

그래서 등장한 것이 SPA 라고 하는 친구다.

🚀 SPA는 무엇인가?

Single Page Application의 약자이다.

HTML, CSS, JavaScript 파일을 최초 1회만 로드하고 이후에는 자바스크립트 파일을 통해 DOM 또는 HTML 파일을 조작하는 방식을 말한다. 어떻게 보면 재탕을 한다고 볼 수 있겠다.

그러면서 SPA 개발을 위해 ES6, Node.js, npm, webpack, Babel, React, Vue와 같은 프론트엔드 라이브러리/프레임워크가 등장하게 된것이다.

본론으로 돌아오면 결국 React는 프론트에서 겪을 수 있는 불편한 점을 해결하기 위해 만들진 라이브러리 중 하나라는 것이다.

👀 React 특징?

🎈 Component 단위

컴포넌트(Component)는 쉽게 얘기하면 '덩어리' 이다. 우리가 레고를 조립하듯이 컴포넌트를 조립하여 하나의 페이지를 만드는 것이다. 예를 들자면 우리가 쇼핑몰을 만든다고 해보자. 그러면 보통 사이트들이 문서 간 이동을 했을때도 Header부분과 Footer부분이 같은 경우가 많다. 그럼 Header와 Footer를 따로 컴포넌트를 만들어주고 필요할때마다 쓰면 되는거다.

=> 그렇기 때문에 유지 보수가 효율적으로 이루어질 수 있고 생산성이 높아진다.

🎈 JSX

JSX(Javascript + xml)는 자바스크립트에 대한 확장 구문으로서, 리액트에서 element(요소)를 제공해 준다.

개발자가 마크업 코드에 익숙하다면 JSX를 통해 컴포넌트를 구성하는 데 쉽게 적응할 수 있다.

🎈 Virtual DOM

React는 렌더링을 할 때 Virtual DOM 가상 DOM을 먼저 만든다. 그 후 실제 DOM과 비교를 해서 변경이 있는 부분만 대체를 한다. 따라서 리소스 낭비를 줄일 수 있는것이다.

👀 React의 단점?

진입장벽이 낮지가 않고 IE8이하 버전은 지원을 하지 않는다.
그래도 필요하다면 React14이하의 버전을 사용하고 이것을 호환해주는 폴리필을 사용하여야 하는데 사실 내 생각에 IE는 어차피 곧 종료되는데 신경을 엄청 쓸 필요는 없다고 느낀다.