反応学習ノート1

Reactを学び必要な知識を整理する学習ノート

📌 React Router

デフォルトではReact Routerを使用します
terminal : npm install react-router-dom
import : import {Route} from "react-router-dom"
の必須タスクです.

<Route exact path="/" component = {Home} />
<Route path="/about" component = {About} />

👀 Route Component

パスをpath値に設定します.

表示するページはコンポーネント値を使用します.

exact:設定されたコンポーネントを表示するには、指定されたパスと完全に一致する必要があります.

もし正確でなければ?

/about中にも/が含まれているので、両方とも見られます.

👀 Route Parameter

ルーティングに特定の値を置く方法.

・history:この対象によりpushreplacelocation他の経路に移動したり、前後ページに切り替えたりできます.

match:このオブジェクトには現在のパスの情報があり、URL照会情報もあります.

・/about/:name:このオブジェクトには、どのルートにマッチするかに関する情報と、params(match.params.nameフォーマット)情報が含まれます.

📌 Parmas

💻 App.js

<Route exact path ="/" component={Home} />
<Route path = "/about" component={About} />
<Route path = "/about/:name" component={About} />
//URL의 params를 설정 할 때에는 :name의 형식으로 설정.

💻 About.js
const About = ({match}) =>{
  return (
    <div>
    	<h2> About {match.params.name} </h2>
	</div>
	);
};

name params、この値はexactで確認できます.

・67917・About素子のリピート❗・67918・

この場合は使用可能Switchでも使用可能/about素子で解決.

スイッチ:一致する最初のルートのみを表示し、残りのルートは表示しない.

<Route exact path = "/" component = {Home} />
<Switch>
  <Route path = "/about/:name" component={About} />
  <Route path = "/about" component = {About} />
</Switch>

🧨 注:まず、比較するルーティングを作成します./about/:name加<a href ...>foo</a>以上であれば、入力nameも表示されません.

👀 Link Component

・𐥍7・アプリケーション内で他のルーティングに移動した場合、・𐥊4・形式❌.この方法を使用すると、リフレッシュが発生します.

リンク・コンポーネントは、ページのリフレッシュを防止し、必要なパスに画面を切り替えることができます.

💻Navigation.js

import React from 'react';
import {Link} from 'react-router-dom' ;

const Navigation = () => {
  return(
    <div>
    	<ul>
    		<li><Link to ="/">Home</Link></li>
    		<li><Link to ="/about">About</Link></li>
    		<li><Link to ="/about/foo">About Foo</Link></li>
    	</ul>
    </div>
    );
};

📌 onCreate()

親->子ども支援データ伝達.

今回は子供->親データを渡すコードです.

💻 App.js (부모 컴포넌트)

import PhoneForm from './components/PhoneForm';
import React,{Component} from 'react';

class App extends Component {
  handleCreate = (data) =>{
    console.log(data);
  }
  render() {
    return (
      <div> 
        <PhoneForm
          onCreate={this.handleCreate}/>
      </div>
    );
  }
}

export default App;

💻 PhoneForm.js(자식 컴포넌트)

import React, {Component} from'react';

class PhoneForm extends Component {
    state ={
        name:'',
        phone:''
    }
    handleChange = (e) =>{
        this.setState({
            [e.target.name]:e.target.value
        });
    }
    handleSubmit = (e) =>{
        e.preventDefault();
        this.props.onCreate(this.state);
        this.setState({
            naje:'',
            phone:''
        })
    }
    render(){
        return(
            <form onSubmit={this.handleSubmit}>
                <input
                    placeholder="이름"
                    value={this.state.name}
                    onChange={this.handleChange}
                    name="name"
                />
                <input
                    placeholder="전화번호"
                    value={this.state.phone}
                    onChange={this.handleChange}
                    name="phone"
                />
                <button type="submit">등록</button>
            </form>
        )
    }
}

export default PhoneForm; 

onCreate()関数でメソッドを定義します.

サブエレメントからpropsを呼び出すonCreate()関数によりステータス値を親エレメントに渡す.

[e.target.name]文法に詳しい!!

📌 反応案を処理する。

👀 データの追加

💻 App.js

import PhoneForm from './components/PhoneForm';
import React,{Component} from 'react';

class App extends Component {
  id = 2
  state = {
    information :[
      {
        id: 0,
        name: '김민준',
        phone: '010-0000-0000'
      },
      {
        id:1,
        name:'홍길동',
        phone: '010-0000-0001'
      }
    ]
  }
  handleCreate = (data) =>{
    const {information} = this.state;
    this.setState({
      information: information.concat({id:this.id++, ...data})
    })
    console.log(data);
  }
  render() {
    const {information} = this.state;
    return (
      <div> 
        <PhoneForm
          onCreate={this.handleCreate}/>
          {JSON.stringify(information)}
      </div>
    );
  }
}

export default App;

PhoneFormから受信したデータを情報オブジェクトに入れる.

idは、植壁オブジェクトに使用される.

this.id++なので、idは2から始まります.

使用

concat.

👀 map関数。

const a = [1,2,3,4,5];
const b = a.map(number => number * 2);

💻 PhonInfo.js

import React, { Component } from 'react';

class PhoneInfo extends Component {
    static defaultProps = {
        info: {
            name: '이름',
            phone: '010-0000-0000',
            id: 0
        }
    }
    render(){
        const style ={
            border: '1px solid black',
            padding : '8px',
            margin : '8px'
        };
        const {
            name, phone, id
        } = this.props.info;

        return (
            <div style={style}>
                <div><b>{name}</b></div>
                <div>{phone}</div>
            </div>
        )
    }
}

export default PhoneInfo;

PhoneInfoListで受信したデータを指定形式のものに飾る

💻 PhoneInfoList.js

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

class PhoneInfoList extends Component {
    static defaultProps ={
        data:[]
    }
    render(){
        const {data} = this.props;
        const list = data.map(
            info => (<PhoneInfo key={info.id} info={info} />)
        );
        return (
            <div>
                {list}
            </div>
        )
    }
}

export default PhoneInfoList;

App.jsから受信したデータはname,phone,idからなるinfoオブジェクトである.

受け取ったオブジェクトをPhonInfoコンポーネントに送信し、指定したスタイルに変換して入れるconst list

💻 App.js

import React,{Component} from 'react';
import PhoneForm from './components/PhoneForm';
import PhoneInfoList from './components/PhoneInfoList';

class App extends Component {
  id = 2
  state = {
    information :[
      {
        id: 0,
        name: '김민준',
        phone: '010-0000-0000'
      },
      {
        id:1,
        name:'홍길동',
        phone: '010-0000-0001'
      }
    ]
  }
  handleCreate = (data) =>{
    const {information} = this.state;
    this.setState({
      information: information.concat({id:this.id++, ...data})
    })
  }
  render() {
    return (
      <div> 
        <PhoneForm
          onCreate={this.handleCreate}/>
          <PhoneInfoList data ={this.state.information} />
      </div>
    );
  }
}

export default App;

PhoneFormサブアセンブリは受信したデータを自分の状態に入れる.

自分のstateをpropsとしてPhonInfoListに送信する.

<ソース:Veloopert.com>