反応学習ノート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>