反応学習ノート1
Reactを学び必要な知識を整理する学習ノート
デフォルトではReact Routerを使用します
terminal : npm install react-router-dom
import : import {Route} from "react-router-dom"
の必須タスクです.パスをpath値に設定します. 表示するページはコンポーネント値を使用します. exact:設定されたコンポーネントを表示するには、指定されたパスと完全に一致する必要があります. もし正確でなければ?
ルーティングに特定の値を置く方法. ・ ・ 📌 Parmasname params、この値は
・67917・About素子のリピート❗・67918・この場合は使用可能 スイッチ:一致する最初のルートのみを表示し、残りのルートは表示しない.
・7・アプリケーション内で他のルーティングに移動した場合、・4・形式❌.この方法を使用すると、リフレッシュが発生します.リンク・コンポーネントは、ページのリフレッシュを防止し、必要なパスに画面を切り替えることができます. 親->子ども支援データ伝達. 今回は子供->親データを渡すコードです. onCreate()関数でメソッドを定義します. サブエレメントからpropsを呼び出すonCreate()関数によりステータス値を親エレメントに渡す.
PhoneFormから受信したデータを情報オブジェクトに入れる. idは、植壁オブジェクトに使用される. this.id++なので、idは2から始まります. 使用concat. PhoneInfoListで受信したデータを指定形式のものに飾る App.jsから受信したデータはname,phone,idからなるinfoオブジェクトである. 受け取ったオブジェクトをPhonInfoコンポーネントに送信し、指定したスタイルに変換して入れる PhoneFormサブアセンブリは受信したデータを自分の状態に入れる. 自分のstateをpropsとしてPhonInfoListに送信する. <ソース:Veloopert.com>
📌 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
/about
中にも/
が含まれているので、両方とも見られます.👀 Route Parameter
history
:この対象によりpush
replace
location
他の経路に移動したり、前後ページに切り替えたりできます.match
:このオブジェクトには現在のパスの情報があり、URL照会情報もあります./about/:name
:このオブジェクトには、どのルートにマッチするかに関する情報と、params(match.params.name
フォーマット)情報が含まれます.💻 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>
);
};
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;
[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;
👀 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.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;
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;
Reference
この問題について(反応学習ノート1), 我々は、より多くの情報をここで見つけました https://velog.io/@luck2901/React-공부노트テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol