[7주차] 리액트: json 데이터를 서로다른 페이지에서 모두 받아야하는 경우

리액트 json 데이터를 서로다른 페이지에서 모두 받아야하는 경우

 

import React, { useEffect, useState } from 'react'
import {BrowserRouter, Routes, Route} from 'react-router-dom';
import Home from '../pages/Home';
import LetterDetails from '../pages/LetterDetails';

function Router() {

  const [letters, setLetters] = useState([]);
  useEffect(()=>{
    const lettersData = require("../database/fakeData.json");
    setLetters(lettersData);
  },[])

  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home letters={letters} setLetters={setLetters}/>}/>
        {/* <Route path="letter-details" element={<LetterDetails />}/> */}
        <Route path="letter-details/:id" element={<LetterDetails letters={letters} setLetters={setLetters}/>}/>
      </Routes>
    </BrowserRouter>

  )
}

export default Router