Global state 선언

import { atom } from 'recoil';

export default atom<string | undefined>({
  key: 'QuizDifficulty',
  default: undefined,
});

atom은 key와 default를 property로 가지고 있는 객체를 파라미터로 받는 함수이다.

key값에는 "고유한 값"이 들어가야 한다 ! (atom으로 만들 global state에 대해서 제각각 다른 고유 값을 가지고 있어야 함, key가 같다면 같은 state값으로 인식)

컴포넌트 내에서 활용

import { QuizDifficultyState } from 'src/state';
import { useRecoilState } from 'recoil';

const QuizDifficulty = () => {
  const [quizDifficulty, setQuizDifficulty] = useRecoilState(
    QuizDifficultyState,
  );
};

useRecoilState라는 Hook을 사용하면 컴포넌트 내에서 global state를 활용할 수 있다.
useRecoilState의 파라미터로는 위에서 선언한 atom을 넣어준다.