[22.05.05] TIL

1. Recoil

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

Atom

간단히 말해 상태이다. 업데이트와 구독이 가능하다. store 없이 전역으로 관리할 수 있다. atom이 업데이트되면 각 구독된 컴포넌트는 새로운 값을 반영해 다시 렌더링 된다.

Selectors

atom이나 다른 selectors를 입력으로 받아들이는 순수 함수이다. selectors를 구독할 수 있으며 변경되면 다시 렌더링된다.
상태를 기반으로 하는 파생 데이터를 계산하는데 사용된다. async를 이용해 비동기 작업도 가능하다. 서버에서 api로 데이터를 불러오는 것도 가능하다.

useRecoilState()

hook의 useState와 사용하는 방식이 동일하다.

useRecoilValue()

상태를 변경하는 함수 없이 상태를 읽을 수만 있게 하고 싶을 때 사용.

useSetRecoilState()

쓰기 가능한 Recoil 상태의 값을 업데이트하기 위한 setter 함수를 리턴. 상태에 읽지 않고 쓰기만 할 때 사용.

Todo Category

Todo List 프로젝트에서 Todo Category를 구현하였다.

• Category별 Todo filter
• 현재 Category 상태

export const todoListCategory = atom({
  key: 'todoListCategory',
  default: 'all',
})


export const filteredTodoListState = selector({
  key: 'filteredTodoListState',
  get: ({ get }) => {
    const todoList = get(todoListState)
    const category = get(todoListCategory)

    if (category === 'all') {
      return todoList
    }

    return todoList.filter((item) => item.category === category)
  },
})

Recoil의 장점과 사용 이유에 대해서는 좀 더 자세히 알아봐야겠다.

2. classnames 라이브러리

React에서 조건부 스타일을 줄 때, className을 함께 결합하기 위해 사용한다. Boolean 값에 따라 클래스명을 추가할 때 이용하면 간단하게 구현할 수 있다.