What is React?

1. JavaScript 기반

React(이하 '리액트')를 사용하기 위해 별도의 언어를 추가로 배울 필요가 없이 자바 스크립트만 잘 사용할 수 있으면 된다.

Angular, Vue.js 와 같이 추가적으로 다른 언어를 배울 필요가 없다는 장점이 있다.

2. Composition

리액트 구조는 요소별, 컴포넌트 별로 쪼개어 작업할 수 있다.

단위로 나누어 작업을 하면 완성된 컴포넌트는 다른 곳에서도 가져다 쓸 수 있게 된다.

JSX
JavaScript eXension은 자바스크립트 언어의 확장이며, 개발자들이 친숙한 형태의 문법을 사용해 컴포넌트 렌더링을 구조화 하는 방법을 제공한다. 간단하게는 리액트로 HTML을 사용하는 방법.

＃출처 - 위키페디아 리액트 #
(https://ko.wikipedia.org/wiki/%EB%A6%AC%EC%95%A1%ED%8A%B8_(%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8_%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC)#JSX)

3. 단방향 데이터흐름

데이터는 항상 일정한 위치에 저장되어 있으며, 저장된 위치에서만 변경할 수 있다.

상태가 변한 경우 데이터는 그대로 있을 뿐이며, UI만 변경 되는 것이다.

Data -> UI
~~UI -> Data~~

※ 리액트의 또 다른 특징들

방대한 커뮤니티와 라이브러리
리액트는 No Framework. UI 라이브러리 이다.
리액트는 MVC 모델에서 V(View)에 해당하기 때문에 Python. Ruby 등과 같은 언어에서 함께 사용 가능하다.

Webpack
React Code를 브라우저가 이해 할 수 있는 코드로 변경해 주는 역할을 한다.
- 공식 사이트 : https://webpack.js.org/

리액트로 작업을 하기 위해서는 Webpack과 같은 모듈 번들러가 필요하다.

페이스북에서 Webpack과 같은 툴을 사용할 필요없이 손쉽게 리액트 앱들 작성할 수 있도록 도와주는 도구가 있는데, 바로 create-react-app 이다. 사전에 node.js가 설치되어 있어야 한다.

npm create-react-app

create-react-app [APPLICATION_NAME]
cd [APPLICATION_NAME]
npm start

저작자표시 비영리 동일조건 (새창열림)