4.1 Recoil 개념

4.1.1 Recoil

4.1.2 Recoil 특징

• 상태 관리의 유연성

• 비동기 처리 지원

• React Hooks 통합

• 효율적인 재 렌더링

4.1.3 Redux와 Recoil의 차이점

1) 상태 관리 방식

• Redux : 리덕스는 중앙 집중식 상태 관리 패턴을 따릅니다. 애플리케이션의 모든 상태는 단일 스토어에 중앙 집중식으로 저장되며, 모든 컴포넌트가 이 스토어에서 상태를 읽고 변경할 수 있습니다. 리덕스의 상태 업데이트는 불변성을 유지하며 액션과 리듀서를 통해 이루어집니다.

• Recoil : 리코일은 컴포넌트 범위의 상태 관리를 강조합니다. 각 컴포넌트는 자체 상태를 갖고, 다른 컴포넌트에 영향을 미치지 않습니다. 리코일의 상태는 아톰과 셀렉터를 사용해 정의되며, 각 컴포넌트에서 필요한 상태를 선택적으로 구독하거나 수정할 수 있습니다.

2) 보일러플레이트 코드와 복잡성

• Redux : 리덕스는 액션 타입, 액션 생성자, 리듀서 등을 정의하는 보일러플레이트 코드가 많이 필요합니다. 이에 따라 코드가 증가하고, 상태 업데이트 로직이 상대적으로 복잡해질 수 있습니다.

• Recoil : 리코일은 리덕스보다 훨씬 적은 보일러플레이트 코드가 필요합니다. 대부분의 작업은 간결한 구문으로 처리되며, 리액트 훅과 통합해 사용할 수 있습니다. 따라서 코드 작성과 유지보수가 훨씬 간단해집니다.

3) 개발자 경험

• Redux : 리덕스는 초기 학습 곡선이 상대적으로 높을 수 있으며, 상태 관리에 대한 명확한 계획과 구조가 필요합니다. 중앙 스토어의 개념과 데이터 흐름을 이해해야 합니다.

• Recoil : 리코일은 리액트 훅과 유사한 구문을 사용하므로 리덕스보다 상대적으로 쉽게 배울 수 있습니다. 컴포넌트 범위의 상태 관리를 지원하기 때문에 상대적으로 덜 복잡합니다.

4) 비동기 지원

• Redux : 비동기 작업을 처리하기 위해서는 리덕스 미들웨어를 사용해야 합니다. Redux-Thunk, Redux-Saga 등의 미들웨어를 통해 비동기 작업을 처리할 수 있습니다.

• Recoil : 리코일에는 셀렉터라는 개념이 있고 이를 사용해 비동기 상태를 처리할 수 있습니다. 비동기 데이터 패치 및 사이드 이펙트 관리를 간단하게 수행할 수 있습니다.

4.1.4 Recoil 상태 관리

1) RecoilRoot

import React from 'react';
import { RecoilRoot } from 'recoil';
import App from './App';
import { Counter } from 'atom이 정의된 파일 경로';

function initializeState({ set }) {
  set(Counter, 5);
}

function Root() {
  return (
    <RecoilRoot initializeState={initializeState}>
      <App />
    </RecoilRoot>
  );
}

export default Root;

2) Atom

const Atom = atom({
	 key: '키값',
	 default: 초기값,
 });

3) Selector

(1) Atom을 구독하는 기능

(2) 서버의 response 값을 저장하는 역할

// 예시 1
const Selector = selector({
	key: 'unique key',
	get: ({get}) => {
		const 원본 = get(atom)
		return 원본변형값
	}
})

• key : 내부적으로 아톰 또는 셀렉터를 식별하는 데 사용되는 고유한 문자열이며 호출할 때 사용됩니다.

• get : 셀렉터는 get이라는 프로퍼티를 통해 셀렉터 내에서 구독하는 아톰의 값을 가져옵니다. 상태 값을 직접 반환하거나 서버와 통신하는 비동기적인 Promise와 같은 유형의 값을 반환할 수 있습니다.
• 매개변수 get : 다른 아톰이나 셀렉터로부터 값을 찾는데 사용되는 함수. 이 함수에 전달된 모든 아톰과 셀렉터는 암시적으로 셀렉터에 대한 의존성 목록에 추가됩니다. 셀렉터의 의존성이 변경되면 셀렉터가 다시 호출됩니다.

const Selector2 = selector({
  key: 'unique key',
  get: ({get}) => {
    const 원본 = get(atom)
    return 변형값
  },
  set: ({get,set}, newValue 또는 DefaultValue) => {
    const 원본 = get(atom)
    const 원본2 = get(atom2)
    // 원본, 원본2, newValue를 활용한 로직
    set(atom, 변형값)
    set(atom2, 변형값)
    // atom, atom2의 상태값이 변경되면 다시 Selecotr2의 get이 실행된다.
  }
})

• set : 이 속성이 설정되면 셀렉터는 쓰기 가능한 상태를 반환합니다. 첫 번째 매개변수로 콜백 객체와 새로 입력 값이 전달됩니다.
• 매개변수 get : 다른 아톰이나 셀렉터로부터 값을 찾는데 사용되는 함수. 함수는 셀렉터를 주어진 아톰이나 셀렉터를 구독하지 않습니다.
• 매개변수 set : 업스트림 Recoil 상태의 값을 설정할 때 사용되는 함수. 첫 번째 매개변수는 Recoil 상태, 두 번째 매개변수는 새로운 값입니다. 새로운 값은 업데이트 함수나 재설정 액션을 전파하는 DefalutValue 객체일 수 있습니다.

4) Recoil Hook

(1) useRecoilState

import { atom,useRecoilState } from 'recoil';

 export const Counter = atom({ 
    key: 'Count', 
    default: 0, 
});

function Counter() {
	//useRecoilState 사용
  const [count, setCount] = useRecoilState(Counter);

  return (
  <>
    카운트 : {count}
    <button onClick{() => setCount(count + 1)}>증가</button>
  </>
  )
}

(2) useRecoilValue

(3) useSetRecoilState

(4) useResetRecoilState

import { atom,useRecoilState, useResetRecoilState } from 'recoil';

export const countState = atom({ 
	key: 'countState', 
	default: 0, 
});

function CounterFunc() {
	//useRecoilState, useResetRecoilState 사용
  const [count, setCount] = useRecoilState(countState);
  const resetCount = useResetRecoilState(countState);

  return (
	  <>
	    카운트 : {count}
	    <button onClick{() => setCount(count + 1)}>증가</button>
	    <button onClick{resetCount}>리셋</button>
	  </>
  )
}

import { atom, useRecoilState, useResetRecoilState, DefaultValue, selector } from "recoil";

export const countState = atom({ 
	key: 'countState', 
	default: 0, 
});

export const countSelector =  selector({
    key: "countSelector",
    get: ({get}): number => {
        const count = get(countState);
        return count;
    },
    set: ({set, get}, newValue)=>{
        return set(
            countState,
            newValue instanceof DefaultValue ? newValue : newValue*2,
        )
    }
})

function CounterFunc() {
	// selector의 useResetRecoilState 사용
  const [count, setCount] = useRecoilState(countState);
  const resetCount = useResetRecoilState(countSelector);

  return (
	  <>
	    카운트 : {count}
	    <button onClick{resetCount}>리셋</button>
	  </>
	  )
}