React - 쇼핑몰 웹사이트 (3) - 반복되는 Component, Router, UseParams, Styled-Components

HTML상에서 image를 넣는 일은 번거롭기 때문에 이미지 갯수가 많아지면, import를 이미지 갯수만큼 해야하는 상황이 생기기 떄문에 매번 import 를 하기 번거롭다면 public 폴더에 이미지를 보관하는 방법 

 

 return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;

 

public에 보관하게 되면 /이미지경로 로 import할 수 있음 

 

 

! 주의점 

발행하려는 사이트 주소가 diptyque.com  이면 별 문제가 없지만,

서브 경로에 발행하고 싶으면 diptypque.com/어쩌구

로 하고 싶으면 아래와 같이 process.env.PUBLIC_URL을 추가해주면 됨 

 

export import

 

data.js

let a = 10
let b = 100


//1개만 내보내기 
export defulat a

//여러개 내보내기 
export default {a, b}

 

다른 파일에서 

//1개만 됐다면 내가 마음대로 작명할 수 있음  
import 작명 from './data.js'

//중괄호로 여러개 가져오면 그대로 가져옴
import {a,b} from './data.js'

 

object자료형

let data = [{}, {}, {}]

! 복잡한 자료에서 데이터를 뽑을때는 시작 기호만 잘 보면 됨  !  

 

[ 대괄호로 시작 : 대부분 array자료

{ 로 시작 : 대부분 object 자료형 

반복되는 Component

1. function 만들고 (무조건 대문자) 

2. return안에 넣기 

3. props 사용해서 전송 

<Card shoes={shoes}/>

 

function Card(props)

 

 

 

Router 라우터

let navigate = useNavigate() //여기에는 함수 같은 것이 들어가있고 페이지 이동을 할 수 있는 역할이 있다 Outlet 

 

<Route path="/about" element={<About />} >
          <Route path="member" element={<div>멤버임</div>}/>
          <Route path="location" element={<About />}/>  
</Route>

 

이렇게 nested(중첩)되어있는 html은 /about/member로 들어가면 About의 어디에 member에 들어있는 html을 보여줘야할지 정해줘야함  ! 아무것도 안보임 ! 

 

! 중첩되어있는 값은 /member가 아니라 member로 쓰기

 

<Outlet> </Outlet> 을 해준다 

URL파라미터로 상세페이지 100개 만들기

/detail 이렇게 생긴 detail페이지가 있는데 지금 물건이 3가지가 있으니까 

/detail/0 -> 첫번째 향수 상세페이지 

/detail/1 -> 두번째 향수 상세페이지 

/detail/2 -> 세번째 향수 상세페이지 

 

<Route path="/detai/:id" element={<Detail products={products} />} />

유저가 :id 자리에 입력한 값을  useParams()에 가져와짐 -> Golang이랑 비슷한걸 !

 

let {id} = useParams();
<h4 className="pt-5">{props.products[id].title}</h4>

 

Styled-Components

 

styled-components를 사용해서 css파일 없이 만들기 

장점

1. CSS 파일 오픈할 필요없이 JS 파일에서 바로 스타일넣을 수 있음 

2. 스타일이 다른 js파일로 오염되지 않음 -> 오염방지 하려면 컴포넌트.module.css 파일을 만들고 별도로 작성해주면 됨 

3. 페이지 로딩 시간이 단축됨 

 

import styled from 'styled-components'

let YellowBtn = styled.button`
  background: yellow;
  color : black;
  padding : 10px;
`

 

Yellow버튼에서 -> Orange로 바꾸고 싶을 때 ? 

 

import styled from 'styled-components'

let YellowBtn = styled.button`
  background: ${props->props.bg};
  color : black;
  padding : 10px;
`


//사용할 때 
<YellowBtn bg ="blue">버튼 </YellowBtn>

 

기존 버튼 그대로 가져와서 커스터마이징 하려면 

let NewBtn = styled.button(YellowBtn)'

커스터마이징하면됨

'

 

 

props.shoes.find((x) => x.id == id )