규모가 커지고 복잡한 애플리케이션을 개발하며 생산성을 향상시키고 많은 양의 데이터 관리와 코드 유지 보수를 더욱 편리하게 하기 위해 다양한 Frontend Framework(Library)가 등장하게 된다. 그 중 가장 많이 쓰이는 세 가지가 Angular, Vue, React 이다.
“지속적으로 데이터가 변화하는 대규모 애플리케이션 구축하는 것” 을 목표로 2013년 Facebook에서 개발한 Library. MVC(Model-View-Controller) Architecture (ex. Angular, Vue)와는 다르게 리액트는 오로지 View만 담당한다. 그만큼 내장되어 있는 기능이 부족해 third-party 라이브러리(ex. React-router, Redux)를 함께 사용한다. 페이스북의 지속적인 관리와 함께 생태계가 활성화 되어 있으며 다양한 자료, 그리고 React Native의 사용으로 인해 사용자가 꾸준히 증가한다.
Virtual DOM - 첫번째 방문을 할때는 자바스크립트 앱이기 때문에 로딩시간이 필요해서 최초의 사용자에게는 안 좋은 경험을 줄 수도 있지만, 로딩이 다 끝나면 웹앱의 특성상 페이지 전환이 부드럽고 빨라진다
📌 01 React 작업 환경 설정
Node.js
$ node -v
$ npm -v
React.createElement()를 사용해서 요소를 추가 해준다면 코드가 길어지고 알아보기 힘든 코드가 된다 그래서 만들어진게 JSX이다
- JSX란? - 자바스크립트의 확장문법으로 HTML 태그를 사용할 수 있도록 해준다
but! JSX는 최신문법이라 옛날 브라우저, 자바스크립트가 이해를 하지 못하는 경우가 생겨서 호환성의 문제가 생길 수 있다 그래서 사용하는게 바벨이다- 바벨이란? - 바벨의 옛날 이름은 6to5였다 ES6를 ES5로 바꿔주는 역할을 했다 JSX를 컴파일해준다
- Webpack(모듈 번들러)이란? - 자바스크립트의 영역이 점점 커지면서 사이트가 무거워지기 때문에 압축해서 output을 내준다
❗ 이러한 바벨, 웹팩을 다 설정하려면 힘들기 때문에 CRA를 사용한다 (CRA에 바벨, 웹팩 다 포함이 되어있다)
(+ eject로 환경설정 데이터를 방출해서 CRA 빌드 환경 설정 변경할 수 있다)
리액트는 UI 기능만 제공한다. 따라서 개발자가 직접 구축해야하는 것들이 많다. 전반적인 시스템을 직접 구축할 수 있으니 원하는 환경에 맞게 최적화할 수 있지만, 반대로 신경쓸 것이 많기 때문에 처음 시작하는 단계에서는 직접 개발 환경을 구축하기 어려울 수 있다.
리액트 팀에서는 이러한 문제를 해결하기 위해 CRA(Create-React-App)
을 만들었다. CRA는 리액트로 웹 애플리케이션을 만들기 위한 환경을 제공한다. CRA를 이용하면 하나의 명령어로 리액트 개발환경을 구축할 수 있다.