[React.js] React 기초4 (+ react-router-dom, REST API, JSON server)

먼저 npm install react-router-dom 으로 설치해준다.

리액트 6버전에서 Switch 가 빠지고 Routes로 변경되었다.

 

html 에서는 <a href> 를 사용하지만, 리액트에서는 <Link to >를 사용한다.

 

App.js

import Header from './component/Header';
import DayList from './component/DayList';
import Day from './component/Day';
// 마지막 .js는 생략할 수 있다.
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import EmptyPage from './component/EmptyPage';

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <Header />
        {/* 스위치 내부는 url에 따라 서로 다른 페이지를 보여준다 
            스위치 외부는 모든 페이지에 공통으로 노출된다 
            /는 첫 페이지를 의미한다 */}
        <Routes> 
          <Route path="/" element={<DayList />} />
          <Route path="/day/:day" element={<Day />} />
          {/* 리액트 라우트 돔에서 다이나믹한 url을 처리할 땐 앞에 :를 붙여주면 된다 
              url에 입력되어 들어오는 다양한 값을 읽어준다 */}
          <Route path="*" element={<EmptyPage/>} />
          {/* 잘못된 페이지 처리는 맨 아래에 입력해야 else 같이 처리해준다 */}
        </Routes>
        {/* 푸터를 쓰고 싶다면 이쪽 스위치 아래에 작성하면 된다 */}
      </div>
    </BrowserRouter>

  );
}

export default App;

 

Day.js

import dummy from "../db/data.json"; //더미 데이터 임포트
import { useParams } from "react-router-dom";
// url이 포함된 값을 얻을 때는 userParams 를 사용

export default function Day(){
    //dummy.words
    const day=useParams().day;
    const wordList = dummy.words.filter(word=>word.day===Number(day));
    //dummy.words 에서 날짜가 1인 것만 필터를 통해서 출력하겠다

    


    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>
    </>
}

DayList.js

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>
                {/* day.day는 data.json파일의 days 객체에서 day키값이 가진 값이다. */}
            </li>
        ))}
        </ul> 
    );
}
// 맵은 배열을 받아서 또다른 배열로 반환해주는 것인데, 
// 이떄 반환되는 요소를 JSX 형태로 작성해주면 된다.
// key 반복되는 요소의 고유한 값으로 전달해야 되서 여기서는 day.id

EmptyPage.js

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

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

function을 만들 때 반드시 리턴을 적어줘야 한다. 그리고 하나의 태그로 묶어서 전달해야 한다.

 

---

각 단어가 고유의 버튼으로만 작동하기 때문에 스테이트를 따로 관리할 수 있는 컴포넌트를 만들겠다

 

* REST API - uri 주소와 메소드로 CRUD 요청을 하는 것이다.

CRUD : (사용 메소드)

Create : POST

Read : GET

Update : PUT

Delete : DELETE

따라서 URI와 메소드만 보고도 어떤 요청인지 구분할 수 있다.

 

* URI : 통합 자원 식별자(Uniform Resource Identifier)로 특정 리소스를 식별해준다. 웹 기술에서 사용하는 논리적 또는 물리적 리소스를 식별하는 고유한 문자열 시퀀스이다. 

* URL : Uniform Resource Locator로 웹 주소이며, 컴퓨터 네트워크 상에서 리소스가 어디 있는지 알려주기 위한 규약이다. URL < URI 처럼 포함관계이다. 두 가지의 가장 큰 특징은 URI는 식별하고, URL는 위치를 가리켜준다.

 

Word.js (컴포넌트는 무조건 첫글자 대문자로, 자주 놓침)

import { useState } from "react";

export default function Word({word}){
    const [isShow, setIsShow] = useState(false); //스테이트 만들기
    const [isDone, setIsDone] = useState(word.isDone);
    // word 데이터가 갖고 있던 isDone을 스테이트의 초기값으로 전달

    function toggleShow(){
        setIsShow(!isShow) //false 면 true, true면 false로 바꾸기
    }

    function toggleDone(){
        setIsDone(!isDone) //false 면 true, true면 false로 바꾸기
    }

    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>
    )
}

Day.js

import dummy from "../db/data.json"; //더미 데이터 임포트
import { useParams } from "react-router-dom";
import Word from "./Word";
// url이 포함된 값을 얻을 때는 userParams 를 사용

export default function Day(){
    //dummy.words
    const day=useParams().day;
    const wordList = dummy.words.filter(word=>word.day===Number(day));
    //dummy.words 에서 날짜가 1인 것만 필터를 통해서 출력하겠다

    return <>
    <h2>Day {day}</h2>
    <table>
        <tbody>
            {wordList.map(word=>(
                <Word word={word} key={word.id} />
            ))}
            
        </tbody>
    </table>
    </>
}

 

 

 

외부 참조 링크

https://www.youtube.com/watch?v=vI-XtN_Zdfg&list=PLZKTXPmaJk8J_fHAzPLH8CJ_HO_M33e7-&index=10 

https://chiki-cha.tistory.com/m/111

[리액트] export 'Switch' (imported as 'Switch') was not found in 'react-router-dom'

https://www.charlezz.com/?p=44767 

URI랑 URL 차이점이 뭔데? | 찰스의 안드로이드