[React] React로 Voca 만들기 -2

App.js

import './App.css';
import Hello from './component/Hello';
import UseState from './component/SampleUseState';
import Welcome from './component/Welcome';
import SampleUseState from './component/SampleUseState';
import Header from './component/Header';
import DayList from './component/DayList';
import Day from './component/Day';
import EmptyPage from './component/EmptyPage';

import {
  BrowserRouter as Router,
  Routes,
  Route,
} from "react-router-dom";


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

index페이지에서는 DayList가 나오게 되는데 

해당 Day를 누르면 

url에 localhost:3000/day/1 이렇게   day=1 파라미터 값을 받아서 해당 값을 출력을 해준다. 

또한 경로에 설정한 값이 아닌 값을 입력을 하면  App.js에 <Route path="*"  element={<EmptyPage/>} /> 값이 랜더링 되는데  url에 잘못된 경로로 접근을 하면 돌아가기 버튼을 이용하여 index페이지로 돌아가게끔 만들었다.

 

다음은 버튼을 누르면 뜻이 보이고 없애는 기능을 만들었다. 

 

 

 

 

Word.js

import { useState } from "react"

export default function Wrod({ 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" : ""}>
            <td>
                <input type="checkbox" checked={isDone} onChange={toggleDone}/>
            </td>
            <td>{word.eng}</td>
            <td>{isShow && word.kor}</td>
            <td>
                <button onClick={toggleShow}>뜻 {isShow ? "숨기기" : "보기"}</button>
                <button className="btn_del">삭제</button>
            </td>
        </tr>


    )
}

toggleShow 함수는  isShow가  true면 false값을 , false면 true를  setIsShow에 넣어주고, 

<button onClick={toggleShow}>뜻 {isShow ? "숨기기" : "보기"}</button를 이용하여 isShow가 ture면 "숨기기" false면 "보기"를 버튼에 출력 해준다. 

 

toggleDone 함수는 isShow가  true면 false값을 , false면 true를  setIsShow에 넣어주고, 

chebox의 속성을 할당 시키면 isDone값을 주고 onChange를 이용하여 isDone값과 반대로 들어가게끔 구현했다. 

 

isDOne:false; 상태

isDone:true상태