[React] 리액트 소개
리액트는 페이스북이 제작한 프론트엔드 라이브러리이다. 프론트엔드 프레임워크/라이브러리는 대표적으로 React, Angular, Vue 이렇게 세가지가 있다.
종류
Angular
- UI를 구현하게 되면서, 앵귤러만의 문법같은 것들이 다양하게 존재
- 라우터, HTTP 클라이언트 등 웹 프로젝트에서 필요한 대부분의 도구들이 프레임워크 안에 내장되어 있음
- 앵귤러1의 경우 만들어진지 꽤 오래 되었고, 기업에서 많이 사용해서, 유지보수하고 있는 프로젝트가 많음
- 앵귤러2의 경우 매우 성숙하지만, 인지도 측면에서는 아직 성장하는중이며, 주로 타입스크립트랑 함께 사용됨
React
- 컴포넌트(UI를 조립해서 보여줌)라는 개념에 집중이 되어있는 라이브러리
- 생테계가 넒고 사용하는 곳도 많음
- HTTP 클라이언트, 라우터, 심화적 상태 관리등의 기능들은 내장되어있지 않음, 따로 공식 라이브러리가 있는 것도 아니여서, 개발자가 원하는 스택을 마음대로 골라서 사용할 수 있음(혹은 직접 라이브러리를 만들어서 쓸 수도 있음)
- 큰 규모의 앱을 만든다면 React
Vue
- 입문자가 사용하기에 적합함
- 대부분 웹팩같은 모듈 번들러를 사용하여 프로젝트를 구성해야하는 앵귤러와 리액트와는 달리, 다순히 CDN에 있는 파일을 로딩하는 형태로 스크립트를 불러와서 사용하기 편리(물론 CLI로 프로젝트를 구성할 수 있음)
- HTML을 템플릿처럼 그대로 사용할 수 있어 마크업을 만들어주는 디자이너/퍼블리셔가 있는 경우 작업 환경이 매끄러움(Templates 형식으로 앱 제작)
- 공식 라우터, 상태관리 라이브러리가 존재
- 빠르고 경량의 앱을 제작하고 싶다면 Vue
쓰는 이유
웹사이트를 만들기 위해선 굳이 프로트엔드 라이브러리의 도움 없이 만들 수 있다. 더군다나 정직인 웹사이트는 HTML, CSS만 사용하여 제작이 가능하다. 거기에 자바스크립트를 더해주면, 유저의 행동에 따라 동적으로 화면을 보여주게 될 것이다.
하지만 프로젝트 규모가 커지고, 다양한 유저 인터페이스를 제공하게 된다면, 그 많은 DOM 요소들을 직접 관리하고 코드 정리하는건 갈수록 정말 힘든 일이 될 것이다. 귀찮은 DOM 관리와 상태값 업데이트를 최소화하고, 오직 개발, 그리고 사용자 인터페이스를 구현하는 것에 집중할 수 있다록 하기 위하여 여러개의 라이브러리/프레임워크들이 만들어 졌다.
무엇을 써야 하나
답은 정해져 있지 않다. 어떠한 프로젝트를 하냐에 따라 알맞은 프레임워크/라이브러리를 선택하면 된다. 이 포스팅에서는 리액트에 대해 알아 볼 것이다.