리액트는 인기 있는 프론트앤드 라이브러리이다.
프론트앤드 라이브러리란 무엇일까?
프론트앤드 라이브러리란?
일단 웹사이트를 만들 땐 프론트앤드라이브러리 없이도 만들 수 있고 정적페이지를 만드는거라면 js없이도 html,css만으로도 만들 수 있다. 여기에 js를 더해주면 유저의 행동에 따라 동적으로 보여줄 수 있다. 하지만 요즘의 웹은 단순히 웹페이지가 아닌 웹 '애플리케이션'이다. 브라우저 상으로도 정말 자연스러운 흐름으로 많은 행동을 할 수 있다.
어떤 유저 인터페이스를 동적으로 나타내기 위해서는 많은 상태를 관리해주어야한다. 프로젝트의 규모가 커지면 많은 돔 요소를 직접 관리하는 것은 힘든 일이기 때문에 웹 개발을 할 때 귀찮은 돔 관리와 상태값 업데이트 관리를 최소한으로 하고 오직 기능관리와 사용자 인터페이스 관리에만 집중할 수 있도록 하기 위해 많은 라이브러리와 프레임워크들이 만들어져있다. 것은 생산성과 높은 유지보수성에 도움을 준다.
프론트앤드 라이브러리로 이미 유명한것들이 많다 Angular, Ember, Backbone, Vue, React... 이 중 3대장은 React Angular Vue!
Angular: 앵귤러는 이미 다양한 기능들이 내장되어 있기 때문에 이것 하나만으로 다양한 것들을 구현할 수 있는 프레임워크이다.. typescript사용이 기본이다.
React: 컴포넌트라는 개념에 집중되어있는 라이브러리이다. 컴포넌트란 데이터를 넣으면 우리가 지정한 인터페이스를 조립해서 보여주는 것이다. 앵귤러와는 달리 사용자에게 전달되는 뷰만 신경쓰고 나머지 기능은 서드파티 라이브러리들을 활용한다. 물론 서드파티 라이브러리 팀은 리덕스, 리액트라우터 등등이 있다. 공식 라이브러리라는 개념이 딱히 없어서 한가지 문제에 대한 여러가지 솔루션이 있다.
Vue: 입문자가 사용하기 쉽고 웹팩같은 모듈 번들러가 없어도 그냥 CDN을 불러와서 사용하는 형태로도 자주 이용된다. HTML을 템플릿처럼 그대로 사용할 수 있어서 마크업을 만들어주는 디자이너나 퍼블리셔가 있는 경우 작업의 흐름이 매끄럽다. 라우터와 공식 상태 라이브러리가 존재한다. (리액트는 라우터나 상태 관련 라이브러리가 서드파티라서 여러 종류가 있다.) 뷰는 앵귤러와 같이 디렉티브라는 기능도 있고 리액트처럼 버츄얼 돔 기반 컴포넌트도 있다. JSX라는 리액트에서 사용하는 무언가를 뷰에서도 사용할 수 있다. 즉 뷰는 리액트와 앵귤러의 좋은 점을 섞어놓은 느낌이다.
Virtual DOM
리액트가 등장하기 전 이미 존재하던 수많은 프레임워크들은 MVC/MVVM/MVW등을 사용하던 프레임워크/라이브러리들이었다. 위에서 공통적으로 가지고 있는 것은 Model이다. 모델의 값이 변하면 뷰에서도 그 값을 변경해줘야하고 반대로 뷰에서 어떤 값을 변화시키려고 하면 모델에서도 변화시켜주는 양방향 바인딩에서 변화(Mutation)라는 것은 상당히 복잡한 작업이다.
특정 이벤트가 발생했을 때 모델에 변화를 일으키고 그 변화를 일으킴에 따라 어떤 돔을 가져와서 어떤 방식으로 뷰를 업데이트해줄지 로직을 정해줘야하는데 리액트를 제작하기 전 facebook에서 변화가 일어나는 상황에 Mutation을 하지 말고 기존의 뷰를 날리면서 새로운 뷰를 만들면 어떨까? 하는 생각을 했고 이런 생각을 토대로 리액트의 개발이 시작되어있다.
하지만 브라우저는 돔 기반으로 작동하기 때문에 페이지가 그때그때 새로운 뷰를 만들려고 하면 성능적으로 저하가 일어난다. 이것을 해결하기 위해 존재하는 것이 Virtual DOM이다. 변화가 일어나면 실제 브라우저의 돔에 값을 넣어주는 것이 아니라 JS로 이루어진 가상의 돔에 렌더링을 하고 기존의 돔과 비교 후 정말 변화가 필요한 곳에만 업데이트를 해주는 것.
리액트는 virtual DOM을 성공적으로 사용한 선발 주자이다. 이 아이디어를 다른 수많은 라이브러리에서도 선택해서 Vue, Marko, Maquette...등등에서도 쓰이고있다.
Webpack과 Babel
Webpack
웹팩은 코드들을 의존하는 순서대로 합쳐서 하나 또는 여러개의 파일로 결과물을 만들어내는 도구이다. 프로젝트를 만들 때 하나하나 만든 파일을 html상에서 일일히 불러오는 것이 아닌 자바스크립트 상에서 import 구문으로 불러오며 번들링 작업을 할 때 특정 확장자마다 어떠한 처리를 하도록 처리해 주는 것.
자바스크립트 파일을 여러개 만들었을 때 하나하나 합쳐서 하나의 파일로 만들어준다. (원한다면 규칙에 따라 분리시켜줄 수 있음)
ES6, 모던 자바스크립트를 사용해 개발을 할 때 일부 새로운 신형 자바스크립트 문법은 구형 자바스크립트에서 지원이 안된다. 새로운 문법을 사용할 수 있도록 babel을 사용할 것이다. css도 하나의 css파일로 묶어줄 수 있다.
한마디로 웹 프로젝트를 만들 때 전체적으로 파일을 관리할 수 있는 도구이다.
Babel
바벨이란 자바스크립트 변환 도구이다. 자바스크립트는 계속해서 새로운 문법이 도입되고 있다. 하지만 node.js나 브라우저의 자바스크립트 엔진에서 모든 문법을 지원하지는 않는다. 리액트 컴포넌트를 작성할 때 사용하는 문법인 JSX를 사용할때도 바벨이 사용된다.
인프런 강의 [velopert(김민준), 누구든지 하는 리액트: 초심자를 위한 react핵심 강좌]를 들으며 정리한 내용입니다.
