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를 렌더링 하는 작업입니다.

 

 

 

02. props

React에서 props는 중요한 개념 중 하나입니다.

component 간 인자를 넘길 때 주로 사용됩니다.

사용법은 매우 간단합니다.

import React from 'react';
import Menu from '../components/Menu';

const Template = () => {
  const foo = 'foo';
  
  return (
  	<Menu param={foo} />
  )
}

• 넘기는 component 쪽에서 위와같이 param={넘길값} 형태로 속성을 정의해줍니다.(param 말고 다른 이름으로 해도 됩니다.)

 

import React from "react";

const Menu = (props) => {
  return (
    <div>
      param : {props.param}
    </div>
  )
}

• props에 param 값이 담겨져 있습니다.