리코일 프로젝트 시작!!

👩🏻‍🏫 공식 문서

Recoil 시작하기 | Recoil

Recoil Hooks

1. atom : 어떤 상태의 key(고유의 값, 약간 react-query의 quer-key 같은 느낌)와 default value를 저장한다.

export const initialState = {
  textState : atom({
     key: 'textState', // unique ID (with respect to other atoms/selectors)
    default: '입력값',
  }),

  modalState : atom({
    key : 'modalState',
    default : false
  }),

  todoListState : atom({
    key : 'todoListState',
    default : []
  })
}

1. useRecoilState : react의 useState 같은 느낌이다. getter와 setter를 같은다 (useState처럼).

import {useRecoilState} from 'recoil';

// 인자로는 atom을 넣고, return 값으로 읽을수 있는 read와 수정할수 있는 set을 뱉는다.
const [todoList, setTodoList] = useRecoilState(initialState.todoListState);

1. useRecoilValue : redux의 useSelector 같은 느낌이다. atom의 최신화 된 값을 받아온다.

const todoList = useRecoilValue(initialState.todoListState);

1. selector : 어떤 고유의 key(atom의 key)가 바뀌었을때를 감지해서 어떤 것을 실행 할 명령을 안에 작성한다. (파생된 상태의 상태변화를 일으킨다. ex) 변화 했을때 다른 key에 해당하는 value를 조작해서 return 하여 최신화 시키는?? ( redux의 dispatch 후 순수 함수로 뷰에서 어떤 변화를 일으킬때 사용했던 느낌.)

const charCountState = selector({
  key: 'charCountState', // unique ID (with respect to other atoms/selectors)
  get: ({get}) => {
    const text = get(textState);

    return text.length;
  },
});

🫡 에러 해결한것