ProgrammingJavascript

react.js

, ,

react.js

문서강좌: https://velopert.com/reactjs-tutorials

동영상: https://www.inflearn.com/course/react-강좌-velopert/?subscribe

ReactJS & [[Express]]

React Fundamentals

  • [[Express]]
  • [[ES6]]
  • MongoDB mongoose

Virtual DOM

DOM(Document Object Model)

Redux, Webpack

React.js 소개

atom 에디터, slack

agility.js, angular.js, aria temmplates, backbone.js, batman.js, bolt, canjs, chaplin + brunch, closure, cujo.js, dart, derby, dermis, dijon, dojo, due, ember.js, epitome, ext.js, funnyface.js, gwt, kendo ui, knockback.js, knockoutjs, maria, marionette, meteor, montage, olives, plastrongjs, puremvc, rappid.js, sammy.js, serenade.js, socketstream, soma.js, spine, stapes, yui

또 다른 프레임워크/ 프레임워크가 아닌 라이브러리

frame; 틀

“A Javascript Library for Building User Interface”

Reactive Native

Angular2 Native

Virtual DOM (가상 돔)

React.js 장점과 단점

React 의 장점? Virtual Dom 사용. 배우기 간단하다. 단 하나를 사용한다. Component

뛰어난 Garbage Collection, 메모리 관리, 성능

서버 & 클라이언트 렌더링

초기 구동 딜레이 & SEO(검색엔진최적화)

매우 간편한 UI 수정 및 재사용(컴포넌트화)

페이스북이 밀어준다.

php CodeIgniter 의 몰락, 인기

laravel

강좌로 돌아가기 velopert(김 민준)의 프로필 사진강사
VELOPERT(김 민준) 9 분
React.js 장점과 단점

Links:

다른 프레임워크나 라이브러리와 혼용가능

React 의 단점

View Only. IE8 이하 지원 X

섹션 2. REACT.JS 시작하기

CODEPEN 설정. ES6 클래스

강좌로 돌아가기 velopert(김 민준)의 프로필 사진강사
VELOPERT(김 민준) 4 분
Codepen 설정 , ES6 클래스
2편 강좌부터는 React.js를 직접 사용해볼텐데요, 기초개념을 배우는 과정에서 환경설정을 편하게 하기 위해 Codepen.io 라는 웹 서비스를 사용합니다. 우리가 첫 컴포넌트를 만들어볼텐데, 만들기전에 ES6의 새로운 문법인 class 에 대해서도 간단하게 짚고 넘어갑시다

Links:

Codepen.io

환경 설정.

Babel ES6 사용. ES5 로 변환. 여러 브라우저 호환

  • react.min.js
  • react.dom.min.js 15버전 이상부터 분리됨

ES6에 새로 도입된 문법 class

JSX 의 특징

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
class Codelab extends React.Component{
  render(){
    return(
       <div>CodeLab</div>
    )
  }
}

class App extends React.Compoent{
  render(){
    return (
      <Codelab/>
    )
  }
}

ReactDOM.render(<App/>.document.getElementById("root"));

1
<div id="root"></div>

자바스크립트에서 HTML 형식 문법을 사용할 수 있다.
babel 에서 jsx 로더를 사용하여 변환해 준다.

let 은 블록 범위

  1. Javascript Expression
  2. Inline Style
  3. Comments 멀티라인 주석을 사용한다.

props

Links:

  • 컴포넌트 내부의 Immutable Data
  • JSX 내부에 {this.props.propsName}
  • 컴포넌트를 사용 할 때, <> 괄호 안에 propsName=“value”
  • this.props.children은 기본적으로 갖고 있는 props로서, 여기에 있는 값이 들어간다.
1
2
3
4
<div>
  <h1>Hello {this.props.name}</h1>
  <div>{this.props.children}</div>
</div>

기본 값 설정

Componet.defaultProps={…}

1
2
3
4
5
6
7
8
9
10
11
class App extends React.Compoent{
  render(){
    return (
      <div>{this.props.value}</div>
    )
  }
}

App.defaultProps = {
  value: 0
}

Type 검증

Componet.propType = {…}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
class App extends React.Componet{
  render(){
    return (
      <div>
        {this.props.value}
        {this.props.secondValue}
        {this.props.thirdValue}
      </div>
    )
  }
}


App.propTypes = {
  value: React.PropTypes.string,
  secondValue: React.PropType.number,
  thirdValue: React.PropTypes.andy.isRequired
}

적용하기

min 버전은 에러가 뜨지 않는다.

state

Links:

  • 유동적인 데이터
  • JSX 내부에 {this.state.stateName}
  • 최기값 설정이 필수, 생성자(constructor)에서 this.state={} 으로 설정
  • 값을 수정 할 때에는 this.setState({…}), 렌더링 된 다음엔 this.state = 절대 사용하지 말것

기본값을 설정하지 않으면, 에러가 발생함.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
class Counter extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      value:0
    }
  }

  render(){
    return(
      <div>
        <h2>{this.state.value}</h2>
        <button>Press Me</button>
      </div>
    )
  }
}

컴포넌트 매핑(Component Mapping)

비슷한 코드를 반복해서 렌더링

JavaScript - map

1
arr.map(callback, [thisArg])
  • callback 새로운 배열의 요소를 생성하는 함수로서, 다음 세가지 인수를 가집니다.
    • currentValue 현재 처리되고 있는 요소
    • index 현재 처리되고 있는 요소의 index 값
    • array 메소드가 불려진 배열
  • thisArg (선택항목) callback 함수 내부에서 사용 할 this 값을 설정
1
2
3
4
5
6
/* ES6 Syntax */
let numbers = [1,2,3,4,5];

let result = numbers.map((num)=>{
  return num*num;
})

arrow function(…) => {…}

컴포넌트 매핑

Links:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
class ContactInfo extends React.Component{
  render(){
    return (
      <div>{this.props.contact.name} {this.props.contact.phone}</div>
    )
  }
}

class Contact extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      contactData : {
        {name:'Abet', phone:'010-0000-2222'},
        {name:'Bbet', phone:'010-0000-2222'},
        {name:'Cbet', phone:'010-0000-2222'}
      }
    }
  }

  render(){
    const mapToComponet = (data) => {
      return data.map((contact, i) => {
        return (
          <ContactInfo contact ={contact} key={i} />;
        )
      })
    };
    return (
      <div>
        <div>Abet 010-0000-2222</div>
        <div>Bbet 010-0000-2222</div>
        <div>Cbet 010-0000-2222</div>
      </div>
    )
  }
}

const 변할일이 없는 값을 지정

1
2
3
4
5
return(
  <div>
    {mapToComponent(this.state.contactData)}
  </div>
)

섹션 3. 개발환경 설정, 프로젝트 진행

작업환경 설정하기

https://www.nitrous.io/
c9.io
groom.io
codeanywhere.com

React Project 만들기

Links:

1
2
3
4
5
c:\>git --version
git version 2.10.1.windows.1

c:\>node -v
v6.9.1

Global Dependency 설치

1
sudo npm install -g webpack webpack-dev-server
  1. webpack: 브라우저 위에서 import(require)를 할 수 있게 해주고 자바스크립트 파일들을 하나로 합쳐줍니다.
  2. webpack-dev-server: 별도의 서버를 구축하지 않고도 static 파일을 다루는 웹서버를 열 수 있으며 hot-loader 를 통하여 코드가 수정 될 때마다 자동으로 리로드 되게 할 수 있습니다.

프로젝트 생성

1
2
3
mkdir react-fundamentals
cd react-fundamentasl
npm init

생활코딩 nodejs

공유하기