React의 개인 메모

각 화면의 위젯(Component) 관리 상태의 프레임워크입니다.

※ react와 함께 자주 사용하는 flux 기준을 나타내는 구조도는 아닙니다
react 기능에만 착안한 그림

장점

직관시도 코드에 대한 설명

책임의 분리, 봉인

결점

버전 업그레이드 후 표기법의 변화가 비교적 크다
(node.js처럼 LTE 버전을 원합니다)

드로잉 코드가 실행 중 오류가 있는 경우 오류 부분을 제외하고는 HTML과 다름
그림을 그리지 않았기 때문에 잘못된 원인을 알기 어렵다.

직관 보기 코드 설명

HTML의 요령에 따라 동적 UI를 정의할 수 있기 때문에
jQuery 등에서 DOM을 검색하는 요소 → 업데이트된 요소는 교체 작업이 필요하지 않습니다.
예제)
1. React.Component(화면 위젯의 기초)를 계승하는 클래스 만들기
2. 다시 쓰는 방법, DOM 템플릿으로 돌아가기(※)
※ HTML을 자바스크립트에 기술한 형식은 당의문법입니다.
컴파일을 통해 DOM을 생성하는javascript로 변환합니다.

class Home extends React.Component {
  constructor(props) {
    super(props);
    this.state = { inputValue: ''};
    this.onChangeInput = this.onChangeInput.bind(this);
    this.onClickBtn = this.onClickBtn.bind(this);
  }

  // 描画
  render(){
      // DOMのテンプレートを作成し、動的な部分は{}内に記述する
      return (
      <div style={{flex:1, flexDirection:"column"}}>
        <div style={{fontWeight:"bold"}}>Title</div>
        <div>
          <input onChange={this.onChangeInput}/></div>
        <div>
          <button onClick={this.onClickBtn}>Show</button>
        </div>
        <div>
          <label>{this.state.inputValue}</label>
        </div>
      </div>
    );  
  }

  // 入力値を保存
  onChangeInput(e){
    // 本来stateの値は直接編集すべきではない
    // (this.setState()でキーを指定して編集する）
    // (ここではわざとボタンを押すまで再レンダリングしないようにしている）
    this.state.inputValue = e.target.value;
  }

  // 保存した入力値でrenderを再描画
  onClickBtn(){
    this.setState({inputValue: this.state.inputValue});
  }
}

수행결과↓

show 단추를 누르면 입력란의 내용이 아래 탭에 표시됩니다.

책임의 분리, 밀봉화

어셈블리(부품) 단위가 닫힌 세계에서 가져오기 출력, 이벤트를 정의합니다.
각 화면 위젯에 DOM을 기술하기 때문에 편집 대상 이외의 요소의 위험성은 없다.
(예: jQuery에서 "$(".className")를 사용하면 의도하지 않은 요소를
가져오기 및 편집 등)
또한 최근 추가된 SPA(SinglePageApplication)
화면 부품을 전환하고 부품 단위로 디스플레이를 업데이트해야 합니다.
단위와 반을 일치하게 할 수 있고 유형 설계를 간소화할 수 있다.
(ReactRouter 관리를 통해 브라우저의 반환 진행에 대응할 수도 있음)

가장 적합한 곳

ReactRouter

v3와 v4의 기법은 매우 크게 다르다.

react-router

활용

Router에 대한 속성 설정(여기는hashHistory).

라우팅 구조는 네스트로 표시됩니다.

v3

import { Router, Route, hashHistory } from "react-router";
const routing = (
  <Router history={hashHistory}>
    <Route path='/' component={App}>
      <Route path='menu' component={Menu} />
     // ...
    </Route>
  </Router>
)

react-router-dom

활용

목적에 맞는 라우터 설정

-Router 바로 아래 요소는 1개이며 계층 구조는 경로로 표시됩니다.

v4

import {Route, HashRouter} from "react-router-dom";
const routing = (
  <HashRouter>
    <div>
      <Route path='/' component={App} />
      <Route path='/menu' component={Menu} />
     // ...
    </div>
  </HashRouter>
)

ReactComponent 읽기 순서

ReactRouter에서 본 컴퓨터의 반은 먼저 읽어야 합니다.
후방에서 읽는 경우 오류가 발생하지 않지만 어떤 상태도 나타나지 않습니다.

ES6(클래스) 형식의 ReactComponent 활성 프로세서

공식 Handling Events – React
구조기 귀속 이벤트 프로세서를 사용하지 않으면
이벤트 처리 프로그램에서this는undefined로 변합니다.

class Home extends React.Component {
  constructor(props) {
    super(props);
    // ここでthisをバインドしないと
    this.onChangeInput = this.onChangeInput.bind(this);
  }

  onChangeInput(e){
    // ここでthisがundefinedになる
    // ⇒ハンドラを呼び出すのはReactのフレームワークのため
    this.setState({inputValue: e.target.value});
  }

  render(){
      return (<div><input onChange={this.onChangeInput}/></div>);  
}

렌더링 방법의 λ 함수

Render 메서드에서 λ 함수를 정의하는 것은 성능이 좋지 않습니다.
A:다시 그릴 때마다 함수가 생성되기 때문입니다.

State 및 Proops

React.Component 구성원state 및 props 처리
-state...뷰 모드(UI에 의존하지 않는 경우 state에 포함되지 않음)
-props... 부모 구성 요소의 state, URL 매개 변수에 대한 정보(정보만 참조)

ReactComponent 메소드 호출 시기

메서드
타이밍
constructor
어셈블리를 생성할 때
render
DOM 마운트 시
componentDidMount
DOM 마운트 후 1회
getDerivedStateFromProps
state,props 변경 전static(매개 변수:변경 전state,변경 후proops)
componentDidUpdate
state,props 변경 후
shouldComponentUpdate
다시 렌더링하기 전에 다시 렌더링해야 하는지 반환
getSnapshotBeforeUpdate
다시 렌더링하기 전
componentWillUnmount
DOM 제거 전
componentWillMount
폐지 예정
componentWillUpdate
폐지 예정
componentWillRecieveProps
폐지 예정

신경 쓰이는 곳

• jsx (React 구성 요소) 에서 스타일 속성을 기술하는 내연 스타일의 기록 방법은
디자인과 코드는 분리할 수 없는 거 아니에요?
A:비공식추천이니까신경 쓰지 마세요.
　　 https://reactjs.org/docs/dom-elements.html#style