#05 리액트 숙련 : 투두리스트의 상세페이지 연결하기(성공)

0. 어제 실패한 상세페이지 연결 😢😢 #04 리액트 숙련 : 투두리스트의 상세페이지 연결하기 [원하는 기능]: 투두리스트의 상세페이지 만들기 -> react-router-dom 적용 TIL ▶원하는대로 구현이 안되고 있음..😢 조금 더 공부해봐야할 것 같음..! 1. Router.js 에서 설정 완료 import { BrowserRouter, Route, zerotonine2da.tistory.com 1. 오늘 연결된 상세페이지 😊😊 [어제 연결이 이상했던 이유] ▶우선 home 화면을 제대로 설정하지 않았음. + App.jsx에서 바로 진행하려고 했음. ▶ react router dom의 사용법 미숙 [구현 정리] 1. App.jsx에서 로 구성하기 2. Home.jsx를 보여주고 싶은 메인화면으로 ..

• format_list_bulleted TIL :: Today I Learned
• · 2023. 11. 10.
• textsms

[React 숙련] 상세페이지 구현하기 (react-router-dom)

0. 동적 라우팅 (Dynamic Route) ▶ path에 유동적인 값 입력 1.Works.jsx import React from 'react'; import { Link } from 'react-router-dom'; const data = [ { id: 1, todo: '리액트배우기', }, { id: 2, todo: '노드 배우기', }, { id: 3, todo: '스프링배우기', }, ]; //console.log(data); function Works() { return ( {data.map((item) => ( {item.id} {item.todo} ))} ); } export default Works; ▶ 를 사용 + {`/(절대경로)works / #{item.id}`} -> 하이퍼링크처..

• format_list_bulleted React
• · 2023. 11. 9.
• textsms