React에서 .env 파일에 환경변수 넣어쓰기

안녕하세요 웹 코기입니다.

오늘은 보안이 필요한 API 키를. env 파일에 넣어서 꺼내와 사용하는 방법을 알아보겠습니다!!

 

1.. env 파일 만들기

먼저 리액트 최상위 루트에. env 파일을 만들어줍시다.

 

그리고 깃에. env파일이 올라가면 안 되니

. gitIgnore에. env를 꼭 추가시켜줍니다!!

 

 

2. 변수 내용 작성

파일 안에 저장할 환경변수 내용을 적어줍니다.

이때 중요한 점은, 반드시 변수명 앞에 REACT_APP_ 을 붙여줘야 합니다!!

이걸 붙여주지 않으면 리액트 앱에서는 변수를 불러오지 않는 것으로 확인됐어요 

 

 

3. 등록한 변수 사용하기

리액트는 라이브러리나 컴포넌트 사용 시 import를 꼭 해줘야 하지만, 

.env에 등록된 변수는 별도의 import가 필요하지 않아요 

전역 어디서든 process.env.으로 가져와서 사용하면 됩니다.

process.env.REACT_APP_SLACK_BOT_TOKEN

 

그럼 모두 오늘도 화팅입니다!!!