18/06/16 01_React 가상돔, state와 props

* React

 - 속도 문제 개선 (가상 DOM)

 - HTML을 출력 (JSX문법 > XML)

 - 데이터 전송 방식 : 단반향

사용자 요청 > 가상 돔 > 돔

props : 속성값(불변)

state  : 변수 => 변경되는 값

axios  : ajax

react-router : link

Node.js, : MongoDB, 외부파일

---

render()

{

return(

=> JSX(javascript + XML)

)

}

* JSX

 - HTML만 사용

 - 여는 태그/닫는 태그 매칭

 - 대소문자 구분

 - 최상위 태그를 필요로 한다

* 권장사항 : 

 - 클래스는 반드시 첫자를 대문자로 사용

 - 사용자 정의 함수 : 재정의 함수를 많이 이용

**기억해야 할 문법

1. map, forEach, => (arrow 함수)

   (=>() 와 같은것 function() )

2. 가상돔에서 계층구조(DOM)로 저장했다가 수정된 부분만 갱신되어 출력

3. 한단계 아래로 속성값을 보낼수 있지만, 두단계 아래로는 속성값을 보낼수가 없다. (단방향)

   구조가 div > p > span 일때

   <div name="">   => p 에서 사용     {this.props.name}

                          => span 에서 사용 {..this.props.name}

** 외부에 있는 파일을 읽을때는 state를 사용.

---

*변수 선언

props : this.props.Xxx (불변) => 상수, 읽기전용

state  : 변경되는 값

- 선언

   this.state = {name: ''}; => this.state.name  //json 방식 저장

=> 변수값 설정

     this.state.name = 'han'; (X) => 갱신되지 않는다.

     this.setState({name: 'han'})  => render()   (O) => 변경되고 갱신됨

ref : DOM을 참조 => 특정 HTML 태그를 참조

1. React 가상돔.

호출 순서

**  render() 전에는 가상돔에서 이루어지고 render()후에 화면에 출력됨.

1. constructor(props) : 변수 선언

2. componentWillMount() : 변경된 state 값 설정 => this.setState({}) => shouldComponentUpdate() 거쳐서 => render() => 화면 출력

3. render() : DOM 갱신 => XML을 이용하여 화면 출력

4. componentDidMount() : 값을 메모리 삭제

5. 화면 출력

값을 변경하고 싶을때 componentWillMount에서 초기값을 주거나, componentDidMount 에서 수정하는..

App.js

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

class App extends Component {
    //변수 선언
    constructor(props)
    {
        super(props);
        this.state = {date: new Date()};
        alert("constructor(props) call..");
    }
    WillMount()
    {
        alert("componentWillMount() call..");
    }

    componentDidMount() // 멤버 함수 => React.Component 에 내장되어 있음. => 재정의(오버라이딩)
    {
        this.timeid = setInterval(()=> this.tick(), 1000);
        alert("componentDidMount() call..");
    }

    tick() {
        this.setState({date: new Date()});
    }

    shouldComponentUpdate()
    {
        alert("shouldComponentUpdate() call..");
    }

    componentWillUpdate()
    {
        alert("componentWillUpdate() call..");
    }

    componentDidUpdate()
    {
        alert("componentDidUpdate() call..");
    }

    componentWillUnmount()
    {
        clearInterval(this.timeid); //render() 후에 호출되는 함수.
        alert("componentWillUnmount() call..");
    }
  render() {
      alert("render() call..");
    return (
        <div>
            <h1>Hello React</h1>
            <h2>현재 시간 : {this.state.date.toLocaleTimeString()} 입니다</h2>
        </div>
    );
  }
}

export default App;

2. state와 props

2-1. props

* json으로 된 뮤직리스트를 변수에 담고 props로 받아 화면에 출력하자.

* 작업 순서

  - 뮤직 리스트 json 파일을 준비

  - index.html 에서 뮤직리스트를 넣어줄 root를 만든다.

  - index.js 에서 뮤직리스트를 변수에 담고 <App />에 속성으로 값을 넘긴다.

  - App.js 에서 받은 속성을 배열로 받고 반복문을 이용하여 render() 안에서 값을 뿌린다.

* 반복문

   - map       : this.props.music.map()

   - forEach() : this.props.music.forEach()

* 처리 순서

entry : index.js

   컴포넌트 호출 => <App />

   App.js

constructor(props)

componentWillMount()

render()

componentDidMount()

   index.html

<div id="root"> render()에서 실행된 html을 출력</div>

index.html

<div class="container">
  <h2>Top 100</h2>
  <div class="row" id="root"></div>
</div>

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

const music = [{"singer":"볼빨간사춘기","rank":1,"title":"여행",
    "poster":"\/\/image.genie.co.kr\/Y\/IMAGE\/IMG_ALBUM\/081\/067\/442\/81067442_1527144018226_1_140x140.JPG","key":"xRbPAVnqtcs"}......];

ReactDOM.render(<App music = {music} />, document.getElementById('root'));
registerServiceWorker();

App.js

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

class App extends Component {
    constructor(props)
    {
        super(props);
    }

    /*
        {this.props.music.map(function(m){ 에서 m은
        m : {"singer":"볼빨간사춘기","rank":1,"title":"여행"} 의 배열 1개
    */    
  render() {
    return (
        <table className="table table-hover">
            <tr className="warning">
                <th>순위</th>
                <th></th>
                <th>노래명</th>
                <th>가수명</th>
            </tr>
            {this.props.music.map(function(m){
                return(
                    <tr>
                        <td>{m.rank}</td>
                        <td><img src={m.poster} width="30" height="30" /></td>
                        <td>{m.title}</td>
                        <td>{m.singer}</td>
                    </tr>
                )
            })}
        </table>
    );
  }
}

export default App;

2-2. state

* json으로 된 뮤직리스트 파일 'music.json'을 axios로 이용하여 읽고 state로 받아 화면에 출력하자.

* 작업 순서

  - 뮤직 리스트 json 파일을 준비

  - package.json 에서 axios 를 추가한다. => 저장하고 npm install 해야함

  - index.html 에서 뮤직리스트를 넣어줄 root를 만든다.

  - index.js 에서 App.js 와 HTML의 root를 연결한다.

  - App.js 에서 state를 배열로 선언하고 axios를 이용하여 json파일을 읽고 값을 배열로 받고 반복문을 이용하여 render() 안에서 값을 뿌린다.

* state 종류

   1) 정수 this.state = {no:0};

   2) 문자 this.state = {name:''};

   3) 배열 this.state = {top:[]};

   4) 객체 this.state = {sawon:{}};

* this의 이해

public class A

{

public A()

{

this => A객체의 this

new B(){

public void disp()

{

this => B객체의 this

}

}

}

}

public class B

{

public void disp(){}

}

클래스마다 this를 가지고 있땁..

package.json

{
  "name": "react-axios",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-scripts": "1.1.4",
    "axios": "^0.18.0",
    "react-router": "^4.3.1",
    "react-router-dom": "^4.3.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }

index.html

<div class="container">
  <div class="row" id="root"></div>
</div>

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

App.js

import React, { Component } from 'react';
import axios from 'axios';

class App extends Component {
    constructor(props)
    {
        super(props);

        this.state = {top:[]};
    }

    componentDidMount()
    {
        var _this = this;   //일반변수

        // 초기값
        this.serverRequest = axios.get('http://localhost:3000/music.json').then(function(result){
        //this. : 멤버변수 (필요할때마다 가져다 쓸수 있음)
        //여기서 this는 app꺼

            _this.setState({top: result.data.genie});
            // this => axios 객체
        });
    }

    componentWillUnmount()
    {
        // 해제
        this.serverRequest.abort();
    }

    //데이터 출력
  render() {
    return (
        <table className={"table table-hover"}>
            <tr>
                <th>순위</th>
                <th></th>
                <th>노래명</th>
                <th>가수명</th>
            </tr>
            {this.state.top.map(function(m){
                return (
                    <tr>
                        <td>{m.rank}</td>
                        <td><img src={m.poster} width="30" height="30" /></td>
                        <td>{m.title}</td>
                        <td>{m.singer}</td>
                    </tr>
                );
            })}
        </table>
    );
  }
}

export default App;