60일차 (Recoil 사용방법 기초 2)

 Selector set 메서드

 이전 글에서 Recoil의 atom과 Selector의 get 메서드를 알아보았다면, 이번 글에서는 set 메서드를 알아보고자 한다. set 메서드의 사용법은 get 메서드와 매우 유사하며, Selector 내부에서 선언한다.

import { atom, selector } from 'recoil';

// atom
export const textState = atom({
  key: 'textState', // 고유한 ID
  default: '', // 기본값
});


// selector
export const Selector = selector({
  key: 'Selector', 
  get: ({get}) => {
    // textState의 현재 값을 가져와서 대문자로 변환
    const text = get(textState);
    return text.toUpperCase();
  },
  set: ({set}, newValue) => {
    // 사용자가 입력한 새로운 값을 대문자로 변환하여 textState atom에 저장
    set(textState, newValue.toUpperCase());
  },
});

 

 get 메서드는 atom의 값을 어떠한 값으로 변경시킨 뒤, 읽기만 가능했다면, set 메서드는 atom 값을 변경시킨 뒤 유지까지 할 수 있는 메서드이다. 하지만 useRecoilState를 사용하면 atom의 자체적인 set 메서드를 통해서 state를 수정할 수 있기 때문에 복잡한 로직이 아니라면 selector의 set 메서드를 사용하는 것은 불필요하다고 생각된다.