React Router (2) 썸네일형 리스트형 Coding Apple, React 강좌 내용 정리.11 - 쇼핑몰 비슷하게 만들어 보기 4.Link, Switch, history , URL parameter 저번 내용들 기본 소스 내용 관련 import / export , 외부데이터 Router.1 Router : Link, Switch, history 상세페이지를 컴포넌트로 만들어보기 (Detail.js) import React, {useState} from "react" function Detail() { return ( 상품명 상품 설명 120000원 주문하기 ) } export default Detail; 이 부분을 다른 파일로 옮긴 후 import 해보기 컴포넌트 파일 만들 때는 import React 해야 한다. import Detail from './Detail'; ... 페이지 이동하는 버튼만들기 Navbar의 Home / Detail Link만들기 Home >> Home Detail >> D.. Coding Apple, React 강좌 내용 정리.10 - 쇼핑몰 비슷하게 만들어 보기.3 : router router (routing) : 페이지 나누기. 분기 (라우팅) 'react-router-dom' 라이브러리를 사용한다. 터미널에서 npm install react-router-dom 명령어를 넣어서 설치한다 router 설정 index.js 파일에서 import {BrowserRouter} from 'react-router-dom' --- ReactDOM.render( // App을 감싼다 , document.getElementById('root') ); [ HashRouter ] 를 쓴다면. 그러면 #/Routing으로 표시할 수도 있다. (BrowserRouter는 # 가 없다) 라우팅을 안전할수있게 도와줄 수 있다. Browser router : 라우팅을 리액트가 아니라 서버에게 요청할 수도 있.. 이전 1 다음
