SPA

1. 주간 오전/오후 날씨를 나타내는 페이지를 구현하시오.

react-router-dom 첫 구현! 앵커인듯 앵커아닌 앵커같은 너...

App.js

import React from 'react';
import {Link,Routes,Route} from 'react-router-dom';
import Weather from './Weather';
import Error404 from './Error404';


function App() {
  return (
    <div>
      <h1>주간날씨</h1>
      <hr />

      <nav>
        <Link to="/weather/mon">월</Link>&nbsp;|&nbsp;
        <Link to="/weather/tue">화</Link>&nbsp;|&nbsp;
        <Link to="/weather/wed">수</Link>&nbsp;|&nbsp;
        <Link to="/weather/thu">목</Link>&nbsp;|&nbsp;
        <Link to="/weather/fri">금</Link>&nbsp;|&nbsp;
        <Link to="/weather/sat">토</Link>&nbsp;|&nbsp;
        <Link to="/weather/sun">일</Link>
      </nav>

      <Routes>
        <Route path="/weather/:id" element={<Weather />} />
        <Route path="/*" element={<Error404 />} />
      </Routes>
    </div>
  );
};

export default App;

Weather.js

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

const Weather = () => {
    console.clear();

    const params = useParams();
    console.debug(params);

    const weather = {
        item: [
            {id: "mon", am: "맑음", pm: "맑음"},
            {id: "tue", am: "비", pm: "맑음"},
            {id: "wed", am: "맑음", pm: "흐림"},
            {id: "thu", am: "맑음", pm: "흐림"},
            {id: "fri", am: "흐림", pm: "흐림"},
            {id: "sat", am: "비", pm: "맑음"},
            {id: "sun", am: "맑음", pm: "맑음"}
        ]
    };

    const id = params.id;
    console.log(id);

    let weatherItem = weather.item.find((v,i) => v.id === id);

    if (!weatherItem) {
        return (<h2>존재하지 않는 데이터에 대한 요청입니다.</h2>);
    }
    
    return (
        <div>
            <h2>오전</h2>
            <p>{weatherItem.am}</p>
            <h2>오후</h2>
            <p>{weatherItem.pm}</p>
        </div>
    );
};

export default Weather;

실행화면