React 공부 정리 v2 #0

React란?

  • React(이하, 리액트)는 JavaScript(자바스크립트)를 사용해서 사용자 인터페이스를 구축하는 엔진이란 표현이 가장 적합하다고 생각함
    • Justin Deal(저스틴 딜)은 반응형 렌더링과 게임 엔진이 작동하는 방식의 유사성에 주목하고 리액트를 설명하는데 '엔진'이라는 용어를 처음 사용
  • 리액트의 경우 ‘View(뷰)’만 처리하기 때문에 이외의 부분에선 다른 기술이 필요함
    • 리액트를 '프레임워크'로 취급하는 경향성이 있는데 리액트는 프레임워크가 아님, 리액트의 공식 문서에서 밝히고 있듯이 UI 개발을 위한 자바스크립트 라이브러리

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에서 DispatcherAction을 보낼 수 있으며, 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을 사용하여 서버쪽 개발에 특화되어있기 때문에 잘못된 정보/내용이 함유되어 있을 수 있으므로 레퍼런스로 활용하기에 약간의 문제가 있음을 사전에 알려드립니다. 그리고 틀리거나/잘못되거나/수정이 필요한 부분은 댓글에 알려주시면 즉시 반영할 수 있도록 하겠습니다.