React

facebook 사용자 인터페이스를 더 잘 만들기 위한 JavaScript 라이브러리

https://ko.reactjs.org/

React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

 

 

https://ko-kr.facebook.com/FacebookKorea/class 기반의 객체지향 프로그래밍.. 

Facebook

React의 ( 사용자 정의 ) 컴포넌트 기능 

사용자가 직접 태그를 생성할 수 있고, 그 이름으로 재사용할 수 있다.

• 가독성
• 재사용성
• 유지보수에 용이

개발환경 셋팅없이 실습할 수 있는 

https://codesandbox.io/s/new

new - CodeSandbox

개발 환경을 설정하고, 최신 JavaScript를 사용하게 해주며, 좋은 개발 경험과 프로덕션 앱 최적화를 해준다. npx create-react-app 명령어로 새로운 리액트 프로젝트를 만들어 준다.

https://github.com/facebook/create-react-app

facebook/create-react-app

최신  버전 다운로드 시

npx create-react-app my-app 
cd my-app 
npm start

현재 위치에 특정 버전 다운로드 

npm create-react-app@x.x.x .

index.js 파일에서 사용자 정의 컴퍼넌트와 사용자 정의 태그를 맵핑시켜 준다.

import App from './App.js';
ReactDOM.render(<App />, document.getElementById('root'));

html 파일에서는 정의한 이름으로 div를 선언해 주면 된다.

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

빌드 명령어

npm run build

 

React debugging tool

https://ko.reactjs.org/community/debugging-tools.html

Debugging – React

 

클래스 컴포넌트

https://ko.reactjs.org/docs/components-and-props.html

Components and Props – React

컴포넌트는 하나의 태그만 있어야

예제 코드

import React, { Component } from 'react';
import './App.css';

class Subject extends Component {
  render() {
    return (
        <header>
          <h1>WEB</h1>
          world wide web!
        </header>
    );
  }
}

class TOC extends Component {
  render() {
    return (
        <nav>
          <ul>
            <li><a href="1.html">HTML</a></li>
            <li><a href="2.css">CSS</a></li>
            <li><a href="3.js">JavaScript</a></li>
          </ul>
        </nav>
    );
  }
}

class Content extends Component {
  render() {
    return (
        <article>
          <h2>HTML</h2>
          HTML is HyperText Markup Language.
        </article>
    );
  }
}

class App extends Component {
  render() {
    return (
        <div className="App">
          <Subject title></Subject>
          <TOC></TOC>
          <Content></Content>
        </div>
    );
  }
}
export default App;

react라이브러리의 component 를 상속받은 클래스를 생성한 후, html 코드 작성. App 클래스에서는 클래스 이름의 태그를 생성해주면 된다.

 

클래스 컴포넌트 속성 추가

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

 

속성 설정을 통한 리팩토링

class Subject extends Component {
  render() {
    return (
        <header>
          <h1>{this.props.title}</h1>
          {this.props.sub}
        </header>
    );
  }
}

class App extends Component {
  render() {
    return (
        <div className="App">
          <Subject title="WEB" sub="world wide web!"></Subject>
          <TOC></TOC>
          <Content></Content>
        </div>
    );
  }
}

 

Props // state

외부에서 component 조작을 위한 props

component 내부의 설정을 담당하는 state

내부를 담당하는 state 와 외부의 설정인 props는 철저하게 분리되어야 함

 

component가 실행될 때 constructor가 실행되어 props 변수를 초기화한다. 이때, props가 내부적으로 사용할 변수일 경우에는 props를 state화 시켜준다. 상위 컴포넌트(App)의 props는 하위 컴포넌트(Subject)의 props로 넘기는 것이 가능하다.

 

  constructor(props){
    super(props);
    this.state = {
      Subject:{title:"WEB", sub:"world wide web!"}
    }
  }

  render() {
    return (
        <div className="App">
          <Subject title={this.state.Subject.title} sub={this.state.Subject.sub}></Subject>
          <TOC></TOC>
          <Content title="HTML" sub="HTML is HyperText Markup Language."></Content>
        </div>
    );
  }