voca 프로젝트- 1. 기본 화면 구현

출처 : https://youtu.be/05uFo_-SGXU

단어 연습 사이트 만들기

database 작성

• data.json

{
  "days": [
    {
      "id": 1,
      "day": 1
    },
    {
      "id": 2,
      "day": 2
    },
    {
      "id": 3,
      "day": 3
    },
    {
      "day": 4,
      "id": 4
    },
    {
      "day": 5,
      "id": 5
    }
  ],
  "words": [
    {
      "id": 1,
      "day": 1,
      "eng": "book",
      "kor": "책",
      "isDone": true
    },
    {
      "id": 2,
      "day": 1,
      "eng": "apple",
      "kor": "사과",
      "isDone": true
    },
    {
      "id": 3,
      "day": 2,
      "eng": "car",
      "kor": "자동차",
      "isDone": false
    },
    {
      "day": 3,
      "eng": "window",
      "kor": "창문",
      "isDone": false,
      "id": 6
    }
  ]
}

• day 데이터와 words 데이터 작성

라우터 구현(React-router-dom)

• npm install react-router-dom -> 라우터 설치
• index.js에 BrowserRouter 태그 적용

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

• App.js에서 Routes로 링크마다 페이지 다르게 보여지도록 함

import './App.css';
import Day from './component/Day';
import DayList from './component/DayList';
import Header from './component/Header';
import {Routes, Route} from 'react-router-dom';
import EmptyPage from './component/EmptyPage';

function App() {
  
  return (
    <div className="App">
      <Header/>
        <Routes>
            <Route path="/" element={<DayList/>} exact={true}/>
            <Route path="/day/:day" element={<Day /> } exact={true}/>
            <Route path="*" element={<EmptyPage/>} ></Route>
        </Routes>

     </div>
  );
}

export default App;

• 예외 페이지는 <Route path="*" element={} > 으로 표현
• day의 파라메타마다 달라지도록 하기 위해 path = "/day/:day"로 작성하여 파라메타 값을 day로 받아오도록 함

• DayList.js

import React from 'react';
import { Link } from 'react-router-dom';
import dummy from '../db/data.json';
const DayList = () => {
    return (
        <ul className='list_day'>
            {dummy.days.map(day => (
                <li key = {day.id}>
                    <Link to={`/day/${day.day}`}>Day {day.day}</Link>
                </li>
            ))}
        </ul>
    );
};

export default DayList;

• day 리스트를 화면에 보여줌

• day 선택 시 해당 날짜의 데이터를 보여주도록 링크를 걸어줌

• Day.js

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

const Day = () => {
    //dummy.words

    const {day} = useParams();// 링크의 파라메타 받기
    
    const wordList = dummy.words.filter(word =>
        word.day === Number(day));//Number로 문자열 -> 숫자 변환
    
    return (
        <>
        <h2>Day {day}</h2>
            <table>
                <tbody>
                    {wordList.map(word => (
                    <tr>
                        <td>{word.eng}</td>
                        <td>{word.kor}</td>
                    </tr>
                    ))}
                </tbody>
            </table>
        
        </>
    );
};

export default Day;

• 파라메타 값을 useParams()를 이용해 받아옴
• day의 값은 숫자이기 때문에 Number을 사용해 문자열로 받아온 값을 숫자로 변환
• day의 값과 일치하는 단어를 화면에 보여지도록 함

-> Word.js 생성하여 뜻 보기와 뜻 숨기기, 체크박스 동작이 따로 되도록 한다.

day.js 수정

<>
        <h2>Day {day}</h2>
            <table>
                <tbody>
         			//Word.js를 따로 생성하여, word를 파라메타로 넘겨줌
                    {wordList.map(word => (
                        <Word word={word} key={word.id}/>
                    ))}
                </tbody>
            </table>
        
</>

Word.js

import React, { useState } from 'react';

const Word = ({word}) => {

    const [isShow, setIsShow] = useState(false); //뜻 보기, 숨기기
    const [isDone, setIsDone] = useState(word.isDone);// 단어 암기 여부 체크

    function toggleShow(){
        setIsShow(!isShow)
    }

    function toggleDone(){
        setIsDone(!isDone)
    }
    return (
        <tr className={isDone ? 'off' : ''}>// isDone이 true일 때 off상태
            <td>
                <input type='checkbox' checked={isDone}
                onChange={toggleDone}/> //체크박스 선태 시 isDone값 달라지도록 함
            </td>
            <td>{word.eng}</td>
            <td>{isShow && word.kor}</td> // isShow가 true일 경우 단어가 보이도록 함
            <td>
                <button onClick={toggleShow}>
                    뜻 {isShow ? '숨기기' : '보기'}
                </button>
                <button className ='btn_del'>삭제</button>
            </td>
        </tr>
    );
};

export default Word;

• 체크박스 선택 시 off 상태로 변환
• 뜻 보기 버튼 클릭 시 뜻을 보여주고, 뜻 숨기기로 바뀜