REACT shop 프로젝트 230917

컴포넌트 만들기

function 작명( ){
return(html넣기)

App function안에있어서 새로만든 컴포넌트 안에서 못불러올때는?

보통 state명과 작명을 같은 이름으로 설정함

그 다음 만들어놓은 컴포넌트에 가서
파라미터로 props를 넣어주고,
해당 state명을 사용할 때 앞에 props.을 붙여서 사용하면 불러와진다

근데 저대로 사용하면 같은 데이터만 보임
< Card > 컴포넌트 사용시 살짝 다른 데이터를 보여주고 싶다면?
해결방법은 ==> props를 잘 이용하기 !

출력될 곳에 인덱스를 변경해주고

컴포넌트에서 인덱스를 없애주면
이미지를 제외한
해당되는 데이터들이 각각의 위치에 잘 출력이 됨

이미지도 바꿔주려면?

---

map을 사용하면 Place의 수 만큼 Card 생성 가능

위 코드를 map 함수를 활용하여 줄여주자!

이렇게 사용하면 됨

페이지 나누는 법 (리액트 미사용)

1. html파일 만들어서 상세페이지 내용 채움
2. 누가 /detail로 접속하면 html 파일 보내줌

페이지 나누는 법 (리액트 사용)

1. 컴포넌트 만들어서 상세페이지 내용 채움
2. 누가 /detail 접속하면 그 컴포넌트 보여줌
   -> react-router-dom 라이브러리 사용하면 쉽게 사용 가능

react-router-dom 설치 방법

설치방법 : 터미널에 npm install react-router-dom@6 입력

index.js에서 BrowserRouter import해주고,
<APP / >도 BrowserRouter로 감싸주기

---

react-router-dom 사용 방법

App.js에

import {Routes, Route, Link} from 'react-router-dom';

return안에

<Routes>
  <Route/>
 </Routes>

적어주기

Route

• 페이지라고 생각하기
• 페이지가 4개 필요하면 Route 4개 써주면 됨
• < Route path="경로" element={html코드}/> 이렇게 작성해주면 해당 페이지로 이동함

• 메인페이지로 이동은 path='/' 주면 됨

상품목록을 메인페이지에서만 보여주고 싶다면?

Route를 아래로 옮긴 후,
메인페이지 Route안에 보여줄 상품목록 코드를 작성해주기
이때