React실전3,4 외부 데이터에 가져올때

2022-05-04 1 분 소요

[ 대괄호 ] : array자료

{ 중괄호 } : object자료

let a = [ ‘kim’, 20 ]
a[0] = kim

let b = { name: ‘kim’, age: 20 }

but 차이점 중괄호 를 쓸 때는 왼쪽에 자료이름을 붙여서 저장해줘야 한다. 이게 object 자료형

object 자료형에서 내가 원하는 data를 뽑고싶다. 하면 배열처럼 순서를 지정하는 게 아니라, 점 찍고 자료이름을 불러준다. b.name, b.age

지금 상품 데이터는 array 안에 상품 데이터들이 들어있고, object 안에는 하나의 상품 데이터 들이 4개정도 들어있는거야. 상품의 제목, 가격, 설명 등 이 데이터에서 내가 원하는 것만 뽑아

{shoes}

복잡한 자료에서 데이터를 뽑을 땐 시작기호만 잘 보면 됩니다.

싱글페이지어플리케이션 html페이지를 한개만 쓴다.

이러면 코드가 너무 길어지기 때문에 라이브러리의 도움을 받습니다.

react-router-dom 이라는 라이브러리를 설치해서 사용합니다.

npm install react-router-dom@6

구글에 react-router-dom@6 검색해서 설치하라는 대로 하면 됨.

index.js 파일로 이동

    <BrowserRouter>
      <App />
    </BrowserRouter>

import 해오기

import { BrowserRouter } from 'react-router-dom';

외부 라이브러리 사용하는 방법은 외우는 게 아니라 필요할 때 검색해서 사용하는 것임.

App.js 로 돌아와서 몇 가지들을 import 하자.

import { Routes, Route, Link } from ‘react-router-dom’

App 컴포넌트 안에 return 안에 <div className=“App”>안에다

<Routes>
 <Route path=“/detail” element={<div>상세페이지임</div>} />
 <Route />
 <Route />
</Routes>

Route : 페이지라고 생각하자.

‘/detail’로 접속할 때마다 여기에 적힌 html 페이지를 보여준다. <Route path=“/detail” element={<div>상세페이지임</div>} />

<Route path=“/about” element={<div>어바웃페이지임</div>} />

메인페이지 <Route path=“/” element={<div>메인페이지임</div>} />

페이지도 컴포넌트로 만들면 좋음.

페이지 이동버튼은 <Link> (이것도 역시 먼저 import 해야겠지)

<Link to=“/”> 홈 </Link>
<Link to=“/detail”> 상세페이지 </Link>

참고