12. recoil 개념
리코일(Recoil)은 Facebook에서 개발한 상태 관리 라이브러리로, React 애플리케이션에서 사용할 수 있습니다. Recoil은 리액트의 기존 기능인 컴포넌트 기반의 로컬 상태를 확장하여, 전역 상태 관리를 효율적으로 처리할 수 있도록 설계되었습니다. Recoil은 Flux 패턴과 비슷한 개념을 사용하긴 하지만, Flux와는 다른 독특한 접근 방식을 취하고 있습니다. Recoil은 "atoms"과 "selectors"라는 두 가지 주요 구성 요소를 통해 상태 관리를 수행합니다. 이 구성 요소들은 Flux의 Store와 Action에 대응되지만, Recoil의 접근 방식은 더 선언적이며, React의 상태 관리와 더 잘 통합됩니다.
애플리케이션에서 사용되는 최소 단위의 상태를 나타내며, 전역 상태로 관리됩니다. Atoms는 여러 컴포넌트에서 구독하고 업데이트할 수 있습니다.
Atoms를 기반으로 파생된 상태를 나타냅니다. 셀렉터는 순수 함수로 작성되며, 다른 atoms와 selectors의 결과값을 입력으로 받아 새로운 값을 계산합니다. 계산된 값은 캐싱되어 효율적으로 관리됩니다.
주어진 atom의 상태를 읽고 업데이트할 수 있는 Hook입니다. 이 Hook은 [value, setValue] 형태의 배열을 반환하며, useState와 유사한 사용 방식을 가집니다. value는 현재 atom의 값이고, setValue 함수를 사용하여 atom 값을 변경할 수 있습니다.
const [value, setValue] = useRecoilState(atom);주어진 atom 또는 selector의 상태를 읽을 수 있는 Hook입니다. 이 Hook은 읽기 전용이며, 상태를 변경할 수는 없습니다.
const value = useRecoilValue(atomOrSelector);주어진 atom의 상태를 업데이트할 수 있는 Hook입니다. 이 Hook은 상태를 변경하는 데 사용되는 함수를 반환하며, 읽기 전용이 아닙니다.
const setValue = useSetRecoilState(atom);주어진 atom의 상태를 초기 상태로 재설정하는 함수를 반환하는 Hook입니다.
const resetValue = useResetRecoilState(atom);주어진 atom의 상태를 읽고 업데이트할 수 있는 Hook입니다. 그러나 반환 값의 형태가 다르며, 상태를 나타내는 'Loadable' 객체를 반환합니다. Loadable은 상태의 현재 상태(로딩, 완료 또는 오류)를 포함합니다. 이 Hook은 비동기 작업 및 에러 처리와 함께 사용됩니다.
const [loadable, setValue] = useRecoilStateLoadable(atom);
주어진 atom 또는 selector의 상태를 읽을 수 있는 Hook입니다. 이 Hook 역시 상태를 나타내는 'Loadable' 객체를 반환합니다. Loadable은 상태의 현재 상태(로딩, 완료 또는 오류)를 포함합니다.
const loadable = useRecoilValueLoadable(atomOrSelector);Recoil 상태를 사용하거나 변경하는 콜백 함수를 생성하는 Hook입니다. 이 Hook은 콜백 함수의 정의와 선택적으로 의존성 배열을 받습니다. 콜백 함수에서는 get, set, reset 및 기타 Recoil 상태 조작 함수를 사용할 수 있습니다. 이 Hook은 주로 비동기 작업이 포함된 상태 조작 로직을 구현할 때 사용됩니다.
const customCallback = useRecoilCallback(
({get, set, reset}) => async (param) => {
// Custom logic using get, set, reset, and other Recoil state manipulation functions
},
[deps]
);주어진 값이 atom 또는 selector인지 확인하는 데 사용됩니다. 전형적으로 자주 사용되는 함수는 아니지만, 동적으로 전달된 Recoil 상태를 처리하거나, 상태 관리 로직이 매우 복잡한 경우에 유용할 수 있습니다. 대부분의 사용 사례에서는 Recoil 상태를 명시적으로 사용하므로, 이 함수를 사용할 필요가 없습니다. 그러나 특정 상황에서 전달된 값이 atom 또는 selector인지 확인해야 하는 경우에는 이 함수가 도움이 됩니다.
import { isRecoilValue } from 'recoil';
if (isRecoilValue(value)) {
// value is an atom or selector
} else {
// value is not an atom or selector
}Recoil과 Redux는 모두 리액트 애플리케이션에서 상태 관리를 돕는 라이브러리입니다. 두 라이브러리 모두 전역 상태 관리에 초점을 맞추고 있지만, 접근 방식과 사용하는 개념에 차이가 있습니다.
Flux 아키텍처를 기반으로 하며, 상태 관리에 디스패처, 액션, 리듀서, 스토어 등의 개념을 사용합니다. 애플리케이션의 상태를 단일 스토어로 관리하며, 리듀서를 사용해 상태를 변경합니다.
전역 상태를 atom이라는 작은 단위로 관리하며, 상태 변경은 atom 자체를 업데이트하는 방식으로 이루어집니다. 또한 selector를 사용하여 파생 상태를 생성하고, 계산된 값들을 캐싱합니다.
Flux 패턴을 이해하고 익히는 데 시간이 걸릴 수 있으며, 미들웨어와 같은 추가 기능을 사용하면 복잡성이 증가할 수 있습니다.
리액트의 기본 개념과 밀접하게 연관되어 있어 러닝 커브가 낮으며, 사용법이 간단합니다. 리액트의 Hooks와 함께 사용되도록 설계되어 있습니다.
모든 상태가 하나의 스토어에서 관리되기 때문에, 상태 변경이 발생하면 연관된 모든 컴포넌트가 리렌더링될 수 있습니다. 이로 인해 성능 최적화가 필요할 수 있습니다.
상태 변경이 발생하면 관련된 atom을 구독하는 컴포넌트만 리렌더링됩니다. 이는 자동으로 성능 최적화를 제공하며, 별도의 최적화 작업이 덜 필요합니다.
두 라이브러리 모두 장단점이 있으며, 프로젝트의 요구 사항과 개발자의 선호에 따라 선택할 수 있습니다. Redux는 대규모 애플리케이션에서 검증된 솔루션으로, 다양한 미들웨어 및 플러그인 생태계를 제공합니다. Recoil은 리액트와의 호환성 및 간결함을 중시하는 프로젝트에 적합한 상태 관리 라이브러리입니다. 상대적으로 러닝 커브가 낮고, 성능 최적화가 자동으로 이루어집니다.
결국, Recoil과 Redux 간의 선택은 프로젝트의 요구 사항, 개발 팀의 기술 및 경험, 그리고 개인적인 취향에 따라 달라집니다. 간단한 애플리케이션에서는 Recoil의 간결함과 리액트와의 밀접한 통합이 더 나을 수 있습니다. 반면, 복잡한 애플리케이션에서는 Redux의 거대한 생태계와 검증된 아키텍처가 더 안전한 선택일 수 있습니다.
Flux는 리액트 애플리케이션에서 데이터 흐름을 관리하기 위한 패턴입니다. 페이스북에서 2014년에 처음 소개되었으며, 리액트와 함께 사용되도록 설계되었습니다. Flux의 주요 목표는 애플리케이션의 데이터 흐름을 단방향으로 유지하여 애플리케이션 구조를 더욱 명확하게 만드는 것입니다.
Flux 아키텍처는 크게 네 가지 구성 요소로 구성됩니다.
애플리케이션에서 발생하는 이벤트 또는 사용자 인터랙션을 나타냅니다. 액션은 애플리케이션의 상태를 변경하는 데 사용됩니다.
모든 데이터 흐름을 관리하는 중앙 허브입니다. 액션을 받아서 적절한 스토어로 전달합니다.
애플리케이션 상태를 저장하고 관리하는 곳입니다. 스토어는 액션을 통해 전달된 데이터를 처리하고 애플리케이션 상태를 업데이트합니다.
사용자 인터페이스를 담당하는 리액트 컴포넌트입니다. 스토어에서 상태를 읽어와서 표시하고, 사용자 인터랙션에 따라 액션을 생성하여 디스패처에 전달합니다.
Flux는 데이터 흐름을 단방향으로 유지함으로써 애플리케이션의 복잡성을 줄이고 예측 가능한 코드를 작성할 수 있도록 돕습니다. 다만, Flux는 아키텍처 패턴이므로 구현체가 아닙니다. 실제로 이 패턴을 구현하는 라이브러리를 선택해야 합니다. Redux는 Flux의 아이디어를 기반으로 한 가장 널리 사용되는 라이브러리 중 하나입니다.