[React] 라우팅

박은정·2021년 12월 8일
0

TIL

목록 보기
36/72
post-thumbnail
post-custom-banner

상품디테일인 경우, 상품을 클릭했을 때 들어가는 것이기 때문에 url이 변경되기 때문에 useParams를 통해 동적라우팅을 사용해주면 된다

<Link to=‘productDetail/:productId’>

: 기호가 path parameter 역할을 한다

import React, {useParams} from ‘react’;
const {productId} = useParams();

useParams(); 가 json 형태로 들어오기 때문에 구조분해할당을 해서 이용해주면 된다.

config 의 id를 github에 노출하면 안되기 때문에
서버 url, key처럼 고유한 값들을 모두 모아서 .env 파일에 넣어서

.env 파일의 데이터를 사용하려면 process.~~ 이런식으로 변수를 사용하면 된다

REACT_APP_URL = ``;
REACT_APP_?? = ``;

이런식으로 .env 파일 안에서 변수를 지정할 때에는 REACTAPP 을 앞에 추가해줘야 한다
혹은 src/apis/config/* 이런식으로 gitignore에 추가해주면 된다
private github일 때에는 그냥 올리는 경우도 있긴 하지만 public 인 경우에는 숨겨주는 것이 좋긴하다

profile
새로운 것을 도전하고 노력한다
post-custom-banner

0개의 댓글