React 공부노트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

1. 경로는 path 값으로 설정.
2. 보여질 페이지는 component 값을 활용.
3. exact : 주어진 경로와 정확히 맞아 떨어져야만 설정한 component를 보여줌.

if ) exact가 없다면??

• /about에도 /가 포함되어 있기에 두 component가 모두 보여짐.

👀 Route Parameter

1. Route의 경로에 특정 값을 넣는 방법.
   • history : 이 객체를 통해 push, replace를 통해 다른 경로로 이동하거나 앞 뒤 페이지로 전환 가능.
   • location : 이 객체는 현재 경로에 대한 정보를 지니고 있고 URL 쿼리 정보도 가지고 있음.
   • match : 이 객체에는 어떤 라우트에 매칭이 되었는지에 대한 정보가 있고 params(/about/: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를 만들었으니, 이 값은 match.params.name으로 확인 가능.

• About 컴포넌트의 중복❗❗
• 이럴땐 exact를 사용하면 되지만 Switch 컴포넌트를 사용해서도 해결 가능.
• Switch : 매칭되는 첫 번째 라우트만 보여주며 나머지는 보여주지 않음.

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

🧨 주의 : 먼저 비교 할 라우트를 위에 작성. 만약 /about가 /about/:name보다 위에 있으면, name을 입력해줘도 나타나지 않음.

👀 Link Component

1. 앱 내에서 다른 라우트로 이동 시에, <a href ...>foo</a> 형식 ❌. 이 방식을 사용하면 새로고침이 되기 때문.
2. Link Component를 사용하면 페이지를 새로 불러오는 것을 막고, 원하는 Route로 화면 전환.

💻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()

1. 부모 -> 자식 props data 전달.
2. 이번은 자식 -> 부모 data 전달해주는 코드.

💻 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; 

1. 부모 컴포넌트에서 onCreate() 함수를 통하여 메소드 정의.
2. 자식 컴포넌트에서 props로 호출된 onCreate() 함수를 통해 부모 컴포넌트에 state값 전달.
3. [e.target.name] 문법 잘 알아두기!!

📌 React 배열 다루기.

👀 데이터 추가

💻 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;

1. information 객체에 PhoneForm에서 받아온 data를 넣어줌.
2. id는 객체를 식벽하기 위해 사용.
3. this.id++이므로 id는 2부터 시작.
4. 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;

1. PhoneInfoList에서 받아온 data를 정해진 format으로 꾸며주는 컴포넌트

💻 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;

1. App.js에서 받아온 data는 name, phone, id로 이루어진 info 객체.
2. 받아온 객체를 PhonInfo 컴포넌트로 보내줘 정해진 style로 바꾼후 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;

1. PhoneForm 자식 컴포넌트에서 받아온 data를 자신의 state에 넣어줌.
2. 자신의 state를 PhonInfoList에 props로 보내줌.

<출처 : velopert.com>