Recoil / [2] Atoms - 전역 상태 관리의 시작

 

- 본 게시물은 리코일 공식문서와 learnrecoil.com 강의를 바탕으로 작성된 글입니다. -

---

Recoil / [1] 시작, 설치

이전 편에 이어서 계속 작성

---

오늘은 이전 게시글에 이어서 직접 전역 상태관리를 진행해볼테다

 

오늘 사용할 전체 코드

 

 

/src/components/examples/Atoms.tsx

import {atom, useRecoilState, useRecoilValue} from 'recoil'

const darkModeState = atom({
    key: 'darkMode',
    default: false,
})

const DarkModeSwitch = () => {
    const [darkMode, setDarkMode] = useRecoilState(darkModeState)

    return (
        <input
            type="checkbox"
            checked={darkMode}
            onChange={(event) => {
                setDarkMode(event.currentTarget.checked)
            }}
        />
    )
}

export const Button = () => {
    const darkMode = useRecoilValue(darkModeState)

    return (
        <button style={{backgroundColor: darkMode ? 'black' : 'white', color: darkMode ? 'white' : 'black'}}>
            My UI Button
        </button>
    )
}

export const Atoms = () => {
    return (
        <div>
            <div>
                <DarkModeSwitch />
            </div>
            <div>
                <Button />
            </div>
        </div>
    )
}

 

우선 index.tsx에서 이 컴포넌트를 불러오는 전제 하에 진행

 

내용을 간단히 설명하자면 dark모드를 구현하는 내용인데, 이 dark모드의 상태를 전역에서 관리하고 싶어 리코일을 사용한다고 가정하는 것이다.

 

만약 이 상태관리가 전역으로 되지 않는다면 각 컴포넌트에 dark모드의 상태에 관한 props를 넘겨주고 주고받고 하면서 drop by했던 모든 컴포넌트들이 재 랜더링 되는 불상사가 발생할 것이다.

약간 이런느낌

하지만 recoil은 아주 최적화 시켜서 전역 상태관리를 할 수 있게끔 도와준다.

 

기존 React만을 사용하면 아래와 같은 느낌이 든다.

출처 https://v.daum.net/v/Pd9BhAA0au

무튼, 요약해서 말하자면

리코일 사용하면 렌더링 비용도 아끼고 전역상태관리하니까 깔끔한 코드 작성이 가능해진다!

---

리코일을 사용하기 위한 기본 단위는 Atom이다.

단어 그대로 원자라는 단위인데, 리코일에서는 원자의 속성이 바뀌고 추가되고 변경되는 느낌으로 철학을 만들어 낸게 아닌가 싶다.

 

[Atom 정의]

Atom을 사용하기 위해선 Atom을 정의해주어야한다.

import {atom} from 'recoil'

const darkModeState = atom({
    key: 'darkMode',
    default: false,
})

recoil 라이브러리에서 atom을 불러온후 atom에 객체 값을 만들어 새로운 변수에 저장하는데,

이게 전역으로 상태 관리가 되는 하나의 변수라고 생각해주면 편하다.

 

현재 객체에 들어가는 첫번째 값으로는 key가 있다.

key는 아주 고유한 값이어야하며, 이 atom을 정의하는 유일한 녀석이기 때문에 중복되는 값이 있으면 안된다.

 

default는 이 지정해주려는 변수의 기본값으로, 마치 useState에서 기본값을 정의하는것과 같다고 생각하면 편하다.

 

[Atom 사용]

import {atom, useRecoilState} from 'recoil'


const DarkModeSwitch = () => {
    const [darkMode, setDarkMode] = useRecoilState(darkModeState)

    return (
        <input
            type="checkbox"
            checked={darkMode}
            onChange={(event) => {
                setDarkMode(event.currentTarget.checked)
            }}
        />
    )
}

atom을 사용하는 방법은 useState를 사용하는 방식과 매우 흡사하다.

useRecoilState를 recoil에서 불러와서 사용해주면 되는데 파라미터로 내가 정의했던 atom 변수를 넣어주면된다.

예시에서는 한 파일에 정의를 했기때문에 따로 변수를 불러오진 않지만, 보통은 atom을 정의하는 위치가 다르니 해당 파일도 import를 해와서 불러와서 넣어주면된다.

 

useRecoilState는 useState와 마찬가지로 두가지를 반환하는데, 첫번째는 해당 값의 현재 상태, 두번째는 해당 값을 바꿀 set함수이다.

그리고 useState와 마찬가지로 사용해주면된다.

 

import {atom, useRecoilValue} from 'recoil'

export const Button = () => {
    const darkMode = useRecoilValue(darkModeState)

    return (
        <button style={{backgroundColor: darkMode ? 'black' : 'white', color: darkMode ? 'white' : 'black'}}>
            My UI Button
        </button>
    )
}

만약 변수의 현재 상태 값만 가지고 오고 싶다면 useRecoilValue를 사용해주면 좋다.

나는 보통 개발할때 useState와 같은 형식을 맞추기 위해 useRecoilState로 항상 같이 불러와서 사용해주는데, 이렇게 value만 불러오면 깔끔하게 상태값만 불러와서 사용이 가능하다.

 

사용방법은 useRecoilState와 동일하며 위와 같이 값만 반환한다.

 

이렇게 recoil을 사용해주면 된당.

 

끝