[React 입문] 더미 데이터,라우터 구현 (json, react-router-dom)

우선, 나는 메인페이지에 몇 몇의 컴포넌트를 이용하여, 내가 참고한 무료강의에서 알려준 것과 같이 '일자(day)' 들에 해당하는 '영단어(word)' 가 나오도록 해보려고 했다. 

1. 메인 페이지의 구성 

Header  +  DayList  +  Day(일자에 해당하는 단어들)  +  EmptyPage (경로 오류 시에 띄어줄 페이지)

 

✨ 꼭 필요한 것!  

-컴포넌트 안에 Header.js / DayList.js/Day.js/EmptyPage.js 임포트(Import) 시켜주기 

- import {BrowserRouter, Route, Switch } from 'react-router-dom';

- json을 이용한 dummy (더미) 데이터 만들어주기

*Router 설치 명령어는 

npm install react-router-dom

---

 json 짧게 개념 잡고 가자!

 

1. JSON은 자바스크립트를 확장하여 만들어짐.

2. JSON은 자바스크립트 객체 표기법을 따른다.

3. JSON은 사람과 기계가 모두 읽기 편하도록 고안됨.

4. JSON은 프로그래밍 언어와 운영체제에 독립적.

 

출처: tcp스쿨-json 기초

App.js ( 메인페이지 jsx 파일)

<Route exact path="/"> 
반드시 path 안의 위치 일치할때만 Route 안의 컴포넌트를 렌더링해서 보여줌.

<Route path="/day/:day">
:day 라는 변수로 해당하는 key 값을 얻을 수 있다.

import './App.css';

import Header from './component/Header';
import DayList from './component/DayList';
import Day from './component/Day';
import EmptyPage from './component/EmptyPage';
import {BrowserRouter, Route, Switch } from 'react-router-dom';

function App() {
   
  return (
   
      <BrowserRouter>
        <div className="App" >
            <div className="headerWrap">
              <Header/>
            </div>
            <Switch>
              <Route exact path="/">
                <DayList/>
              </Route>
              <Route path="/day/:day">
                <Day />
              </Route>
              <Route>
                <EmptyPage/>
              </Route>
            </Switch>
        </div>
      </BrowserRouter>
 
  );
}

export default App;

Day 1, 2, 3 클릭(DayList.js) 하면 그에 해당하는 단어들(Day.js)을 보여준다. 

그것은 Router 와 Link 태그를 이용해 주어야 함. 

src 폴더 안 db폴더를 새로 생성한 후 data.json 이라는 더미(dummy) 데이터를 생성해 준다. 

더미 데이터 

{
    "days": [
      {
        "id": 1,
        "day": 1
      },
      {
        "id": 2,
        "day": 2
      },
      {
        "id": 3,
        "day": 3
      }
    ],
    "words": [
        {
          "id": 1,
          "day": 1,
          "eng": "book",
          "kor": "책",
          "isDone": false
        },
        {
          "id": 2,
          "day": 1,
          "eng": "car",
          "kor": "자동차",
          "isDone": false
        },
        {
          "id": 3,
          "day": 2,
          "eng": "school",
          "kor": "학교",
          "isDone": false
        },
        {
          "id": 4,
          "day": 2,
          "eng": "pencil",
          "kor": "연필",
          "isDone": false
        },
        {
          "id": 5,
          "day": 3,
          "eng": "window",
          "kor": "창문",
          "isDone": false
        },
        {
          "id": 6,
          "day": 3,
          "eng": "house",
          "kor": "집",
          "isDone": false
        }
      ]
    }

Header.js 에서 알아야 할 것.

- router를 이용해 Link 태그 사용 

- <Route path="/"></Route>
/ 는 첫페이지를 의미 

import { Link } from "react-router-dom"; Link 임포트 시켜줌. "react-router-dom" 에서

<h1 style={{textAlign:"center",}}>
	<Link to="/" style={{color:"#fff",margin:"0 auto",}}>토익 영단어(고급)</Link>    
</h1>

DayList.js 

map() 함수를 이용해 반복해준다. 

*map함수는 callbackFunction을 실행한 결과를 가지고 새로운 배열을 만들 때 사용한다.

import { Link } from "react-router-dom";
import dummy from '../db/data.json';

export default function DayList(){
    //console.log(dummy);
    return (
        <ul className="list_day">
            {dummy.days.map(day=> (
                <li key={day.id}>
                    <Link to={`/day/${day.day}`}>Day{day.day}</Link>
                </li>
            ))}
        </ul>
    );
}

*map 함수 참조할 문서 

https://velog.io/@daybreak/Javascript-map%ED%95%A8%EC%88%98

Day.js

-  useparams 훅을 이용해 id와 라우트를 매치해주자.
   const wordList = dummy.words.filter(word=> word.day === Number(day)); 

data.json 파일에서 "day" : 1 숫자화 되어있기 때문에 Number(day) 시켜준다. 
   day 의 해당하는 data.json 안에 day: 숫자로 표현된다.

 

*해당 Day 에 관련된 영단어들을  렌더링 시켜주기 위해, 역시 map 함수를 이용해, tr 반복해주기. 

table로 짠 후 tr 에 반드시 key 값  {word.id} 를 넣어준다.  

*Array.prototype.filter() 필터 함수.
filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환한다.

import dummy from '../db/data.json';
import { useParams } from "react-router-dom";
export default function Day() {
    //dummy.words
    // const a  = useParams();
    const {day} = useParams();
    
    const wordList = dummy.words.filter(word=> word.day === Number(day));
    // console.log(wordList);
  
    return(
    <>
    <h2>Day {day}</h2>
    <table>
        <tbody>
        {wordList.map(word=>(
            <tr key={word.id}>
                <td >{word.eng}</td>
                <td >{word.kor}</td>
            </tr>
        ))}
        </tbody>
    </table>
    </>
    );
}

경로값 주소가 유효하지 않을 경우 나타내 주는 에러 페이지 

EmptyPage.js

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

export default function EmptyPage(){
return(
<>
    <h2>잘못된 접근입니다.</h2>
    <Link to="/">돌아가기</Link>
</>
)
}

구현되는 모습

구현되는 모습

링크태그와 더미데이타를 이용한 해당 컴포넌트 렌더링..