Atom의 effects와 selector

selector 예제:

 - atom이 변하면 자동으로 따라서 변하는 동적인  atom 제공.

/// atom 예제
import { atom } from 'recoil';

export const userState = atom({
  key: 'userState', // 고유한 키
  default: {
    id: 1,
    name: 'John Doe',
    email: 'johndoe@example.com'
  },
});


/// selector 예제 => atom이 변하면 자동으로 따라서 변하며, 동적인 atom느낌을 제공.

import { selector } from 'recoil';
import { userState } from './userAtom'; // 위에서 정의한 atom을 가져옵니다.

export const userNameUpperState = selector({
  key: 'userNameUpperState', // 고유한 키
  get: ({get}) => {
    const user = get(userState);
    return user.name.toUpperCase();
  },
});

 

 

effects 예제

-  onSet : 바뀔때마다 호출.

- setSelf:  초기값 설정에 사용.  default:와 비슷하지만 비동기도 지원하고, 동적인 조건식 제공가능하므로 좀 더 권장. 

import { atom } from 'recoil';

export const userState = atom({
  key: 'userState',
  default: {
    id: 1,
    name: 'John Doe',
    email: 'johndoe@example.com'
  },
  effects: [
    ({ onSet }) => {
      onSet(newValue => {
        console.log('userState has changed:', newValue);
      });
    }
  ]
});