React Study v2 #00
React란?
React(이하, 리액트)는 JavaScript(자바스크립트)를 사용해서 사용자 인터페이스를 구축하는 엔진이란 표현이 가장 적합하다고 생각함- Justin Deal(저스틴 딜)은 반응형 렌더링과 게임 엔진이 작동하는 방식의 유사성에 주목하고 리액트를 설명하는데 ‘엔진’이라는 용어를 처음 사용
- 리액트의 경우 ‘View(뷰)’만 처리하기 때문에 이외의 부분에선 다른 기술이 필요함
React 특징
VirtualDOM을 사용한 화면 조작
- ‘diffing’ 알고리즘을 사용하여 문서의 변화를 확인하고, ‘Reconcillation’를 진행하기 때문에 부분적인 조작이 가능함
- 그리고
DOM을 직접 조작하는 것이 아니라 ‘인-메모리’에 존재하는 DOM을 조작하는 것이기 때문에 효율적이고 빠름VirtualDOM에 대한 좀 더 자세한 내용은 Ember.js에서 구현한VirtualDOM프로젝트를 참고
Components와 Unidirectional
- 리액트는
Components(컴포넌트)로 구성되어 있기 때문에 개발 할 때 모든 객체를 컴포넌트 단위로 고려하는 것이 좋음 - 리액트에선
Unidirectional(단방향 데이트 흐름)으로 전송되기 때문에 데이터를 추적하기 쉽고 상대적으로 디버깅을 쉽게 할 수 있음 - 이러한 특징을 살려서
Flux패턴을 구현한Redux라이브러리를 많이 활용함
JSX
JSX는 사용하길 권하며(de facto), 리액트 컴포넌트에서 UI를 정의하는 표준적인 방법으로 널리 이용되고 있음JSX는 컴파일 되기 때문에 JS에 비해서 실행 속도가 빠르고,Type-safe(정의된 연산에 대해서만 작동하며, 정의되지 않은 연산은 결과를 제공하지 않는 것)하며 컴파일링 과정에서 에러를 감지 할 수 있음Type-safe의 정의는 위키피디아 항목 중 ‘Vijay Saraswat’ 항목을 참고할 것!
Vijay Saraswat provides the following definition: “A language is type-safe if the only operations that can be performed on data in the language are those sanctioned by the type of the data.” [2]
JSX 특징
<div>로 해당 태그를 감싸줘야 함(Nested Element)- JavaScript 표현식은
{}로 wrapping 해야 함 Inline Style을 사용할 때, string 형식("")이 아니라camelCase형태인 객체를 사용- 주석을 적성 할 때는
{/* ... * /}으로 작성
...
let style = {
color: 'aqua',
backgroundColor: 'black'
};
...
render() {
let text = "Hello React.js";
return (
<div> {text} <div>
);
}
props
props는 컴포넌트에서 사용 할 변경 불가능한(immutable) 데이터를 지칭함props는 parent(부모) 컴포넌트에서 child(자식) 컴포넌트로 데이터를 전달 때 사용함defaultProps를 사용해서 초기값을 지정할 수 있으며,propTypes를 사용해서 Type 검증이 가능
state
state는 컴포넌트에서 변경 가능한 데이터를 지칭함state는 외부에서 데이터를 변경할 때this.setState()를 사용해야 함
Life Cycle
- 컴포넌트를 생성시
constructor–>componentWillMount–> render–>componentDidMount - 컴포넌트를 제거시
componentWillUnmount호출 - 컴포넌트의
prop이 변경시componentWillReceiveProps–> shouldComponentUpdate–>componentWillUpdate–>render–>componentDidUpdate - 컴포넌트의
state가 변경시shouldComponentUpdate–>componentWillUpdate–>render–>componentDidUpdate
FLUX 패턴/아키텍처
Action --> Dispatcher --> Store --> View구조로 데이터를 전달하고 업데이트 할 수 있도록 구성된 패턴View에서Dispatcher로Action을 보낼 수 있으며,Dispatcher는 작업이 중첩되지 않도록Action을 스케쥴링 함(사실상 대기)- FLUX 패턴/아키텍처를 좀 더 유연하게 사용할 수 있도록
Redux라는 라이브러리를 많이 사용함
서버 만들기
- 리액트 실습을 위해서 간단하게
Node.js를 사용해서 서버를 만들어보도록 하겠습니다. C:\works\hello-react라는 폴더를 만들고 해당 폴더에Express를 설치하도록 하겠습니다.윈도우 환경에서 아래 명령어를 차례대로 입력하시면 됩니다.
$ cd c:\
$ mkdir works
$ cd works
$ mkdir hello-react
$ cd hello-react
$ npm init -y
$ npm install express --save
VSCode등을 사용해서 아래 파일을C:\works\hello-react에 작성해 주세요
// server.js
var express = require('express');
var app = express();
app.use(express.static('public'));
app.listen(3000, function() {
console.log('Express server is up on port 3000');
});
index.html파일을 저장하기 위해서public폴더를 생성합니다.
$ cd C:\works\hello-react
$ mkdir public
public폴더에index.html파일을 만들고 아래와 같이 작성합니다.
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1> Hello React! </h1>
</body>
</html>
- 서버가 제대로 작동하는지 확인하기 위해서
C:\works\hello-react폴더에서 아래 명령어를 입력해주세요.
$ cd C:\works\hello-react
$ node server.js
Ref.
글쓴이가 C/C++, python을 사용하여 서버쪽 개발에 특화되어있기 때문에 잘못된 정보/내용이 함유되어 있을 수 있으므로 레퍼런스로 활용하기에 약간의 문제가 있음을 사전에 알려드립니다. 그리고 틀리거나/잘못되거나/수정이 필요한 부분은 댓글에 알려주시면 즉시 반영할 수 있도록 하겠습니다.
Array
