🐤Redux - Part 2. React + Redux (6)

const Detail = () => {
  return <h1>Detail</h1>
}

<Router>
  <Route path="/" exact component={Home}></Route>
  <Route path="/:id" exact component={Detail}></Route>
</Router>

import { Link } from "react-router-dom";

..... 이하 중략 .....

return (
  <li>
    <Link to={`/${props.id}`}>
      {props.text} <button onClick={props.onBtnClick}>DEL</button>
    </Link>
  </li>
)

import { useParams } from 'react-router-dom'

const Detail = () => {
  // useParams hooks 를 사용했을 때 id 를 가져오는 법
  const id = useParams()
  console.log(id) // {id: "1610867080250"}

  return <h1>Detail</h1>
}

const mapStateToProps = (state, ownProps) => {
  console.log(ownProps)
}

export default connect(mapStateToProps, null)(Detail)

const mapStateToProps = (state, ownProps) => {
  console.log(ownProps)
  const {
    match: {
      params: { id },
    },
  } = ownProps
}

const mapStateToProps = (state, ownProps) => {
  console.log(ownProps)
  const {
    match: {
      params: { id },
    },
  } = ownProps
  return { toDo: state.find(toDo => toDo.id === parseInt(id)) }
}

const Detail = props => {
  console.log(props)
  return (
    <>
      <h1>{props.toDo?.text}</h1>
      <h5>Created at : {props.toDo?.id}</h5>
      {/* 왜 물음표를 붙여야 에러를 피하는지는 아직 잘 모르겠다. */}
    </>
  )
}