React란 무엇인가?

오늘은 본격적으로 리액트를 학습하기 전에 리액트가 어떻게 만들어졌으며 무엇인지 알아보도록 하겠다. 

 

 

 

React

 

 

 

일단, 프론트엔드 라이브러리 없이 웹사이트를 만들 수도 있다. 그리고 단순히 정적인 페이지를 만드는 것이라면 오히려 라이브러리의 사용이 더 불필요할 수도 있다. 왜냐하면 javascript를 익히지 않고도 html과 css만으로 구현이 가능하기 때문이다. 하지만 요즘 우리가 접하는 많은 사이트들은 정적인 웹 페이지가 아니라 동적인 웹 애플리케이션이다. 사용자의 동작에 반응하며 상태를 관리해줘야 한다. 게다가 다양한 UI와 서비스를 웹에서 제공하게 된다면 그 많은 요소들을 직접 관리하고 정리하는 것은 효율이 떨어진다. 

 

이러한 효율성의 문제를 해결하기 위해 등장한 것이 프론트엔드 라이브러리이다. 

대표적으로  Angular, Ember, Backbone, Vue, React 등이 존재한다. 

 

Angular

Angular는 SPA(Single Page Application) 개발을 위한 구글의 오픈소스 자바스크립트 프레임워크이다. 웹 애플리케이션은 물론 모바일 웹, 네이티브 모바일과 데스크탑 애플리케이션까지 프론트엔드 개발에 필요한 대부분의 기능을 갖추고 있다. 정적 타입을 제공하는 TypeScript를 주력 언어로 채택하여 대규모 애플리케이션 개발에 보다 적합한 환경을 제공한다.

 

https://angular.io/

 

Vue

Vue(/vjuː/ 로 발음, view 와 발음이 같습니다.)는 사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크이다.다른 단일형 프레임워크와 달리 Vue는 점진적으로 채택할 수 있도록 설계하였다. 핵심 라이브러리는 뷰 레이어만 초점을 맞추어 다른 라이브러리나 기존 프로젝트와의 통합이 매우 쉽습니다. 그리고 Vue는 현대적 도구 및 지원하는 라이브러리와 함께 사용한다면 정교한 단일 페이지 응용프로그램을 완벽하게 지원할 수 있다. 

 

 

 

https://vuejs.org/

 

 

위의 프레임워크들은 자바크스립트의 특정 값이 바뀌면 특정 DOM 속성이 바뀌도록 연결을 해주어 업데이트 하는 작업을 간속화해주는 방식으로 웹개발의 문제들을 해결해 주었다. 

 

 

React

 

하지만 리액트는 페이스북 개발자들의 독특한 발상을 가지고 만들어졌다. 상태에 따라 DOM을 어떻게 업데이트할지 고려하는 것이 아니라 DOM을 아예 고려할 필요도 없게 만들어버렸다. 그리고 Virtual DOM을 도입해서 업데이트된 내용만 비교해서 바로 수정이 가능하도록 설계한 것이다. 

 

 

 

또한 리액트는 “컴포넌트” 라는 개념에 집중이 되어있는 라이브러리이다. 홈페이지의 구성요소들이 하나의 거대한 파일에 다 들어있는 것이 아니라 구성요소별로 분할되어 존재하고 유지 보수하기에 적합한 구조이며 인간의 사고 방식과 구현 형태가 비슷하다. 

 

 

React를 배워야 하는 이유?

 

React를 배워야하는 이유는 무엇일까? 이에 대한 대답은 굉장히 단순하다. 편리하기 때문이고 그렇기 때문에 많은 개발자들이 만들어 놓은 생태계가 굉장히 넓기 때문이다. 그렇기에 지금 프론트엔드를 시작하는 사람이라면 당연히 배워야 하는 기술 중에 하나이다.