<React> .env 사용하기

React에서 .env를 사용하기 위한 방법을 알아봅니다.

project

project
 +|--.env
  |--app.jsx
  |--src
   *|--api.js
 *|--.gitignore

.env

React에서 .env를 사용하기 위해서는 REACT__APP 이라는 prefix를 붙여서 정의해주어야합니다. 아래는 어떤 api에 대한 key를 .env에 저장하는 코드입니다. 주의할 것으로 .env파일에서는 string문자열을 나타내는 ""을 붙이지 않아야 합니다.

REACT_APP_API_KEY = asdfasdgsdgsdkjgkd

api.js

api.js에서 .env에 저장된 api key를 받아와서 사용해보겠습니다.

export default class API{
  getData = async() => {
    const res = await fetch(`<api주소>/?key=${process.env.REACT_APP_API_KEY}}`);
    const data = await res.json();
    return data
  }
}

.gitignore

.env파일을 올리면 안되므로 .gitignore 파일에 꼭 .env도 추가해주세요

.env