React에서 match와 props

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

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

match는 route -> component

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

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

---

01. match

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

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

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

---

오늘은 헷갈리던것을 적었다.
무한 스크롤을 하고있는데 이해하기 조금 힘들었는데 반복해서 보니깐 그나마 나아지는것 같다.
확실히 반복이 필요하다 아마 낯설어서 그런거겠지?
짧은 시간안에 많은것을 할려고하니 조금 힘이든다.
몇일간 계속새벽3시까지 하고 잔거 같은데 점점 아픈 곳이 생기고있다😫
몸관리 잘하고 꾸준히 하는것을 목표로 해야겠다