[22.05.11] TIL

useSearchParams

현재 위치에 대한 URL의 쿼리 스트링을 읽고 수정하는데 사용한다.

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

const [searchParams, setSearchParams] = useSearchParams();

const currentSearch = searchParams.get('s');
setSearchParams({key: value});

searchParams를 이용해 key값의 value를 가져올 수 있다.
setSearchParams를 사용하여 쿼리 스트링을 변경할 수 있다.

.env

API key는 고유 자산이므로 깃헙에 올리면 어떤 큰일을 당할지 모른다.
환경 변수를 사용하여 API key를 숨겨야 한다.

CRA에서 사용 방법

• 최상위 폴더에서 .env 파일 생성
• .gitignore에 .env 추가
• REACT_APP_으로 시작하는 key를 입력
  ex) REACT_APP_MOVIE_API_KEY=영화 API KEY 작성
• process.env.REACT_APP_MOVIE_API_KEY 형태로 js 파일에서 이용
• 서버 재시작 후 환경 변수 적용