상태 관리 라이브러리 Recoil

📌 Recoil

• React를 위한 상태관리 라이브러리

💡 상태관리란? 
애플리케이션의 상태를 효율적으로 관리하고 업데이트하는 과정을 의미.
상태는 사용자의 입력, 서버의 응답, UI의 현재 상태 등 데이터와 관련된 모든 정보를 포함한다.

 

 

1. 꼭 Recoil 같은 상태 관리 라이브러리를 써야할까? 

• 리액트에 내장 된 상태관리를 위한 훅인 useState ⇒ props를 이용해 부모 컴포넌트에서 자식 컴포넌트로 값을 전달해야하기 때문에 props drilling이 생길 수 있다.
• 이를 개선하기 위해 만들어진 것이 ➰리액트의 Context API ⇒ Context의 값이 변경되면 이 값을 사용하는 모든 컴포넌트가 리렌더링 됨. 불필요한 리렌더링이 발생할 수 있다.

상태 관리 라이브러리를 사용하지 않을 때

 

부모 컴포넌트에서 자식 컴포넌트로 props를 통해 상태를 전달해줘야 한다.

props는 읽기 전용! 자식 컴포넌트에서 부모의 state를 변경하려면 복잡해진다.. (자식 컴포넌트가 부모의 state를 변경 할 수 있도록 하는 함수를 부모가 자식에게 props로 전달해줘야 함)

 

 

상태 관리 라이브러리를 사용 할 때

 

한 파일에 state를 넣어두고 어디에서든지 해당 state를 사용할 수 있다. (props로 부모 → 자식 컴포넌트로 넘겨주지 않아도 됨)

props와 다르게 읽기, 쓰기가 모두 가능해 자식 컴포넌트에서 부모의 state를 직접 변경할 수 있다.

 

 

2.  Recoil의 주요개념

Atoms

• 상태의 단위
• atom 함수를 사용해 생성
• atom은 고유한 상태 값 (= key) 을 가지며 여러 컴포넌트에서 공유 가능
• React의 state처럼 기본값을 가진다
• atom이 업데이트 되면 이 값을 사용하는 모든 컴포넌트가 리렌더링

➰'뭐야 위에서 이런 이유때문에 Contex api를 대신해서 recoil 쓴다며..!' 생각할 수 있는데 여기서 둘의 차이점을 간략하게 설명하자면,, 
Context는 값이 변경되면 provider 하위에 있는 자식 컴포넌트가 context의 값을 사용하고 있든 아니든 리렌더링 될 수 있다. 이를 막기 위해서 React.memo나 useMemo를 써주는 것!
반면 Atom은, 특정 상태 단위에 대한 의존성을 가지므로, 굳이 React.memo나 useMemo 등을 사용하지 않아도 해당 atom을 쓰는 컴포넌트만 리렌더링 된다.

⇒ Context API의 리렌더링 범위가 더 넓다!

const fontSizeState = atom({
  key: 'fontSizeState',   // 각 atom의 고유한 key
  default: 14,            // 기본값 14
});

function FontButton() {
  const [fontSize, setFontSize] = useRecoilState(fontSizeState);  // useRecoilState 훅 사용
  return (
    <button onClick={() => setFontSize((size) => size + 1)} style={{fontSize}}>
      폰트사이즈 +1 
    </button>
  );
}

• atom을 읽고 업데이트 하기 위해서 useRecoilState 라는 훅을 사용.
  (첫번째 요소인 fontSize는 현재 atom의 상태 값, 두번째 요소인 setFontSize는 이 값을 변경하는 함수)
• React의 useState와 비슷하지만 상태가 컴포넌트 간에 공유 될 수 있다는 차이가 있다
• 버튼을 클릭하면 폰트 사이즈가 1만큼 증가하며, 이 fontSizeState라는 atom을 쓰는 다른 컴포넌트의 폰트 사이즈도 같이 변화한다

 

 

Selectors

• atoms의 상태를 기반으로 파생된 값을 계산할 수 있도록 해주는 순수 함수
• 다른 atoms나 selectors의 값을 읽고, 그 값을 기반으로 계산된 결과를 반환하는 역할
• selector 함수를 사용해 생성
• atom처럼 역시 고유한 key를 가진다

const fontSizeLabelState = selector({   // selector함수 사용
  key: 'fontSizeLabelState',   // selector의 고유한 key
  get: ({get}) => {    // get 속성으로 다른 atom 혹은 selector의 값을 가져옴
    const fontSize = get(fontSizeState);  // 여기서는 atom인 fontSizeState의 값을 가져온 것
    const unit = 'px';

    return `${fontSize}${unit}`;  // 가져온 fontsize값이랑 unit인 px을 결합해 반환
  },
});

⇒ fontSizeLabelState는 fontSizeState라는 atom을 기반으로 파생된 값을 반환하는 셀렉터

 

 

📝 한 줄 요약,,

Atom을 사용해 상태를 변경하고, 그 값을 selector를 통해 읽는 구조로 상태를 관리한다!

 

 

 

 

https://recoiljs.org/ko/docs/introduction/core-concepts

https://www.codeit.kr/tutorials/47/Axios-%EC%82%AC%EC%9A%A9%EB%B2%95