JavaScript 라이브러리 React란 및 설치

https://ko.wikipedia.org

<"리액트를 다루는 기술" 책 참조>

---

안녕하세요. 이번에 천천히 REACT에 대해서 공부해보려고 합니다.

REACT

REACT를 공부하기 전에 먼저 REACT가 무엇인지를 알아보겠습니다.

 

기존 프레임워크들은 주로 MVC, MVVM이라는 아키텍처를 사용합니다.

 

위에 나온 아키텍처들의 지닌 공통점은 모델과 뷰가 있다는 것입니다.

 

프로그램이 사용자에게 어떤 작업을 받으면 컨트롤러는 모델 데이터를 조회하거나 수정하고

 

변경된 사항을 뷰에 반영합니다.

 

애플리케이션 규모가 크면 상당히 복잡해지고 제대로 관리하지 않으면 성능이 떨어질 수 있습니다.

 

여기서 페이스북 개발 팀은 어떤 데이터가 변할 때마다 어떤 변화를 줄지 고민하는 것이 아니라

 

기존 뷰를 날려 버리고 처음부터 새로 렌더링 하는 방식입니다.

 

위에 설명한 방식으로 최대한 성능을 아끼고 편안한 사용자 경험을 제공하면서 구현하고자 개발한 것이 바로

 

리액트라고 설명되어 있습니다.

 

리액트 특징

<Virtual DOM을 사용한다.>

 

1. 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리 렌더링 합니다.

 

2. 이전 Virtual DOM에 있던 내용과 현재 내용을 비교합니다.

 

3. 바뀐 부분만 실제 DOM에 적용합니다.

 

<UI 컴포넌트를 만들기 위한 라이브러리이며 React의 컴포넌트는 트리 형태로 구성된다.>

 

<부모 컴포넌트에서 하위 컴포넌트로 전달하는 단방향의 데이터 흐름을 가져서 데이터 추적과 디버깅을 쉽게 해 준다.>

 

리액트 설치

React 설치를 해보려고 합니다. 운영체제는 윈도우입니다.

 

https://nodejs.org/ko/download/

다운로드 | Node.js

 

윈도우 환경이기 때문에 Windows Installer를 눌러줍니다.

 

 

다음을 눌러줍니다.

 

 

Status가 완료되면 

 

 

Node js 설치 완료

 

 

CMD창에 node -v를 확인해보면 버전이 나오면 성공입니다.

 

React를 사용할 에디터를 설치해보려고 합니다.

 

에디터는 서브라임 텍스트, 브래킷, VS Code, 아톰 등이 있지만

 

이번에 설치해볼껀 아톰을 설치해보려고 합니다.

 

https://atom.io/

A hackable text editor for the 21st Century

 

간단히 설치가 완료됩니다.

 

다음에 올릴 글들은 예제를 같이 해보면서 공부하려고 합니다.

 

※궁금하신 점은 댓글로 남겨주세요※

※공감이 되셨다면 공감 버튼도 눌러주세요※