[TIL] 22.05.10 프리온보딩 Day 6 - Recoil, CRA .env 설정

⛓️ Recoil

Recoil의 등장배경

Redux, Mobx는 단순 자바스크립트 상태관리 라이브러리일 뿐, 리액트를 위한 상태관리 라이브러리는 아니었다.

2020년 5월 페이스불이 발표한 리액트 상태관리 라이브러리 리코일은 최대한 Reactish하게 문법이 이루어져있으며 오직 리액트를 위한 상태관리 라이브러리이다.

 

리덕스나 Mobx를 사용하기 위해서는 store 구성을 위한 package.json에 있는 CRA 설정부터 action, reducer 등 기본적인 보일러 플레이트를 설계해야 하고, 그에 따른 코드들을 감싸주어야 환경설정이 끝난다. 

하지만 리코일은 RecoilRoot를 최상위로 감싸주면 사실상 프로젝트 설정은 끝난다.

 

RecoilRoot

리코일 상태를 사용하는 컴포넌트는 부모 트리 어딘가에 나타나는 RecoilRoot가 필요하다. 루트 컴포넌트가 RecoilRoot를 넣기에 가장 좋은 장소이다.

 

import React from 'react';
import {
  RecoilRoot,
  atom,
  selector,
  useRecoilState,
  useRecoilValue,
} from 'recoil';

function App() {
  return (
    <RecoilRoot>
      <CharacterCounter />
    </RecoilRoot>
  );
}

Atom

Atom은 상태(state)의 일부를 나타낸다. atoms는 어떤 컴포넌트에서나 읽고 쓸 수 있다.

atom의 값을 읽는 컴포넌트들은 암묵적으로 atom을 구독하기 때문에 atom에 어떤 변화가 있다면 그 atom을 구독하는 모든 컴포넌트들이 리렌더링된다.

 

const textState = atom({
  key: 'textState', // 고유한 문자열. 프로젝트 전체에서 다른 atom, selector에 대해 고유해야 함.
  default: '', // 초기값.
});

 

컴포넌트가 atom을 읽고 쓰게 하기 위해서는 useRecoilState()를 아래와 같이 사용하면 된다.

 

function CharacterCounter() {
  return (
    <div>
      <TextInput />
      <CharacterCount />
    </div>
  );
}

function TextInput() {
  const [text, setText] = useRecoilState(textState);

  const onChange = (event) => {
    setText(event.target.value);
  };

  return (
    <div>
      <input type="text" value={text} onChange={onChange} />
      <br />
      Echo: {text}
    </div>
  );
}

Selector

Selector는 파생된 상태(derived state)의 일부를 나타낸다. 파생된 상태는 상태의 변화이다. 파생된 상태를 어떤 방법으로든 주어진 상태를 수정하는 순수 함수에 전달된 상태의 결과물로 생각할 수 있다.
 - Recoil 공식 문서 설명

공식 문서 설명을 봤는데 잘 이해가 안돼서 좀 더 찾아보았다.

 

selector는 atom에서는 불가능한 비동기 처리와 복잡한 로직을 구현할 수 있다.

 

import { DefaultValue, selector } from "recoil";
import countState from "../atom/countState";

export default selector({
    key: "countSelector",
    get: ({get}): number => {
        const count = get(countState);
        return count + 1; {/* countState를 구독 중이며, 바뀔 때마다 1씩 증가시켜 반환함. */}
    },
    set: ({set, get}, newCount)=>{
        return set(countState, newCount + 10)
    }
})

 

selector는 총 세가지 값을 가진다.

• key: atom의 key와 동일하게 프로젝트 전체에서 고유한 문자열을 가져야 한다.
• get: 파생된 상태를 반환하는 곳. get(countState) 처럼 countState를 get하고 있으면 countState가 바뀔 때마다 새로운 값을 리턴해준다. 여러번 사용 가능하고, 그 중 하나라도 변하면 리렌더링 된다.
• set: set없이 get만 제공되면 selector는 read-only 상태지만 set을 제공하면 쓰기 가능한 형태를 반환한다. selector의 값을 수정하는 것이 아닌 수정 가능한 atom의 값을 바꿔준다.

set은 두가지 매개변수를 받는다.

첫 번째는 recoil의 상태, 두 번째는 어떤 값으로 바뀔건지, 즉 새로운 값을 넣는다.

 

---

⚙️ 리액트(CRA)에서 .env를 이용한 환경변수 설정

Create React App으로 생성된 앱에서 전역설정과 같은 환경변수를 사용하기 위해 env 파일을 활용할 수 있다. 앱의 버전 정보, api 주소 등을 전역변수처럼 사용할 수 있는 것이다.

 

git에 업로드할 때 .env파일은 노출되지 않도록 꼭 .gitignore 파일에 추가해놓자.

 

기본적으로 env 파일의 추가는 루트 폴더에 .env 파일을 추가하면 된다.

 

파일의 내용을 작성할 때 변수명은 꼭 REACT_APP_으로 시작해야 한다.

 

JSX 코드에서 사용할 때는 따로 import할 필요없이 바로 process.env.REACT_APP_API_KEY 처럼 바로 사용가능하다.

 

+ 개발/배포환경별 환경변수도 적용 가능하다.

• .env.development
• .env.test
• .env.production

등 파일 생성 규칙이 정해져 있고, 앱 빌드에 따른 파일의 우선순위는 아래와 같다고 한다.

npm start: .env.development, .env
npm run build: .env.production, .env
npm test: .env.test, .env

 

모든 .env 파일은 중첩되며 왼쪽의 파일이 우선순위가 높다. 즉 똑같은 환경변수가 선언되어 있는 경우 가장 오른쪽에 있는 .env의 우선순위가 가장 낮다는 뜻이다.

 

---

Link와 NavLink의 차이

NavLink는 링크에 스타일을 넣어줄 수 있다.

activeStyle과 activeClassName 속성이 있는데, 리액트 앱의 현재 URL과 to가 가리키는 링크가 일치할 때, activeStyle과 activeClassName이 활성화되고, 일치하지 않으면 비활성화가 된다.

 

🎸 오늘 수업 내용 정리

• react의 suspense를 이용해서 로딩화면을 구현할 수 있다.
• axios를 그냥 바로 사용해도 좋지만 통일된 형태로 만들어놓으면 편하게 쓸 수 있다.
• 타입스크립트 타입은 any를 쓰지 말자. 애초에 쓰면 안된다. 나중에 수정하는 것을 까먹고 놓친다..
• 라우팅할 때 path에 *을 넣어주면 다른 지정해준 path 이외의 경로에 방문했을 때 나오는 페이지를 보여줄 수 있다. (404 페이지)
• GNB(Global Navigation Bar), LNB(Local Navigation Bar)
• setInterval이나 setTimeout을 썼다면 꼭 unmount될 때 clear할 수 있도록 하자. 매번해주기 번거롭다면 따로 function을 만들어 놓는 것도 좋은 방법.
• 리코일은 간단하게 쓸 때 장점이 크다. 따라서 최대한 atom만 써서 할 수 있도록 하자.
• npm camelCase -> 자동으로 카멜케이스로 바꿔줌.
• BabelEdit 프로그램 -> json 파일 작성하기 쉽도록 해줌.