React에서 match와 props

React에서 match와 props는 별로 연관성이 없습니다.

하지만 변수를 다른 컴포넌트로 넘겨 사용할 때 쓰는 건데, 헷갈릴때가 있더라구요..(나만 그럴수도..ㅎㅎ)

match는 route -> component

props는 component -> component 로 변수를 넘길 때 사용합니다.

간단한 예를 통해 사용법을 알아보도록 하겠습니다.

01. match

React에서 route에서 component로 인자를 넘기고 싶을 때는 어떻게 해야할까요?

예를 들어 아래와 같은 url 패턴을 만들고 싶습니다.

URL 내용
/ 홈
/board 게시판
/contact 연락처
이 중 board, contact라는 값을 컴포넌트 단에서 값을 동적으로 받아 처리하고 싶다면?

먼저 App.js를 아래와 같이 작성합니다.

import React, { Component } from "react";
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';

import MainTemplate from "./templates/MainTemplate";

class App extends Component {
  render() {
    return (
        <Router>
          <>
            <Switch>
              <Route exact path="/" component={MainTemplate}></Route>              
              <Route path="/:menu" component={MainTemplate}></Route>
            </Switch>
          </>
        </Router>
    );
  }
}

• Route의 path 속성에 콜론(:)으로 인자를 주면 됩니다.

이 후 MainTemplate을 아래와 같이 작성합니다.

import React from "react";
import _ from 'lodash'

import HomeContainerfrom '../containers/HomeContainer';
import BoardContainer from '../containers/BoardContainer ';
import ContactContainer from '../containers/ContactContainer ';

const MainTemplate = ({match}) => {
  const menu = _.defaultTo(match.params.menu,'home')
  const getContainer = (menu) => {
    switch(menu){
      case 'home' : return <HomeContainer/>
      case 'board' : return <BoardContainer />
      case 'contact' : return <ContactContainer />
      default : return <HomeContainer/>
    }
  }
  return (
	<>
	  {getContainer(menu)}
	</>
  );
};
export default MainTemplate;

• match라는 필드를 사용하면 됩니다.
• match.params.menu 에 App.js에서 작성한 menu 변수를 가져올 수 있습니다.
• 위의 코드는 menu를 받아서 원하는 menu에 맞는 container를 렌더링 하는 작업입니다.

내 프로젝트 적용했었다~

const post_id = props.match.params.lunchid;

includes() 사용하기

var str = 'To be, or not to be, that is the question.';
console.log(str.includes('To be'));       // true
console.log(str.includes('question'));    // true
console.log(str.includes('nonexistent')); // false
console.log(str.includes('To be', 1));    // false
console.log(str.includes('TO BE'));     

Number() 사용하기

Number 객체는 숫자 값으로 작업할 수 있게 해주는 래퍼(wrapper) 객체입니다. Number 객체는 Number() 생성자를 사용하여 만듭니다. 원시 숫자 자료형은 Number() 함수를 사용해 생성합니다.

new Number(value);
var a = new Number('123'); // a === 123은 false
var b = Number('123'); // b === 123은 true
a instanceof Number; // true
b instanceof Number; // false

---

오늘 하면서 알게 된것 몇가지를 적어봤다.
확실히 자바스크립트 공부가 필요해 보인다.
오늘은 그래도 문제가 해결되 나가서 그런지 기분은 좋았다.