-
[React.js] React 기초4 (+ react-router-dom, REST API, JSON server)React 2022. 10. 30. 13:05
먼저 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'
업데이트를 하면 안 될거 같은 너무 멋진창이 터미널에 뜨길래 업데이트를 했더니 Switch가 작동이 안 된다... 리액트 6버전 이상에서 switch가 삭제됐다고 한다... 이 부분을 이렇게 고치면 된다. } /
chiki-cha.tistory.com
https://www.charlezz.com/?p=44767
URI랑 URL 차이점이 뭔데? | 찰스의 안드로이드
URI 그리고 URL을 혼용해서 사용하는 경우가 있다. 대부분의 경우 문제가 없지만 정확하게 이 둘의 차이점이 존재한다. 그러므로 각 용어의 정의와 용도에 대해서 알아본다. URI URI는 특정 리소스
www.charlezz.com
'React' 카테고리의 다른 글
[React Project] 1. 주제 선정 & 일정 수립 (0) 2022.10.31 [React.js] React 기초5 (+ useEffect, fetch, react Hooks, useNavigate, PUT, DELETE, POST) (0) 2022.10.30 [React.js] React 기초3 (+ props, 더미 데이터 구현, map(), filter()) (0) 2022.10.28 [React.js] React 기초2 (+ css 파일, 이벤트 처리, state) (0) 2022.10.27 [React.js] React 기초1 (+ App.js) (0) 2022.10.26