[recoil] 기본

 

atom :  key : 어떤 데이터 default : 기본값 : 관리할 대상 생성  >>> 값을 변경하려면 setter 함수에 접근해야한다. ,접근은 getter 함수 느낌

 

useRecoilValue : 값 불러오기  >> atom 의 getter 함수라고 생각하면된다.

 

useSetRecoilState : 값 변경하기 >> atom 의 setter 함수라고 생각하면 된다. >> 데이터는 immutable 하게 관리한다. >> 기존의 데이터를 변경하는게 아니라 데이터를 기반으로 새로운 데이터를 저장하는 방식이ㅏ.

 

useRecoilState : 값을 변경하고 불러오는 과정을 useState 처럼 사용할 수 있는 훅이다. 변경이나 삭제 등 유용하다.

 

selector  : 파생된 상태 개념에서 출발한다.

파생된 상태 > 주어진 상태에 순수함수를 이용해 나온 결과물 >> ex) 필터링된 리스트 , 리스트를 활용한 통계 

 

다시 selector >> 파생된 상태(derived state)의 일부를 나타낸다.

 

내부적으로 filterState(atom 으로 default 값에 show all , show completedm show uncompleted) 개념 이 사용되고 여기에서 케이스 구분해서 list 를 상황에 맞게 필터링 ? 이나 등등 필요한 작업을 통해 리스트를 파생된 상태로 만들어 낼수 있다.

 

selector 내부에서 get method 의 인자로 get 이라는 함수를 받아 함수내부에서 get 함수를 사용할수 있고 이 함수는 인자로 리코일이 관리중인 상태값을 넣어주면 현재 상태값을 반환 해준다.

 

그 데이터를 이용해 순수함수로 작업 마친 이후에 해당값을 리턴해주면 

파생된 상태가 selector 를 통해 반환된다.

const todoListStatsState = selector({
  key: 'todoListStatsState',
  get: ({get}) => {
    const todoList = get(todoListState);
    const totalNum = todoList.length;
    const totalCompletedNum = todoList.filter((item) => item.isComplete).length;
    const totalUncompletedNum = totalNum - totalCompletedNum;
    const percentCompleted = totalNum === 0 ? 0 : totalCompletedNum / totalNum;

    return {
      totalNum,
      totalCompletedNum,
      totalUncompletedNum,
      percentCompleted,
    };
  },
});

// selector 내부에서 get 을 통해 리스트 가져와서 필터링 이후 반환

function TodoListStats() {
  const {
    totalNum,
    totalCompletedNum,
    totalUncompletedNum,
    percentCompleted,
  } = useRecoilValue(todoListStatsState);

  const formattedPercentCompleted = Math.round(percentCompleted * 100);

  return (
    <ul>
      <li>Total items: {totalNum}</li>
      <li>Items completed: {totalCompletedNum}</li>
      <li>Items not completed: {totalUncompletedNum}</li>
      <li>Percent completed: {formattedPercentCompleted}</li>
    </ul>
  );
}

// selector 가 반환한 값은 useRecoilValue 를 통해 받아서 사용할수있다.

useRecoilValue 가 아니라 useRecoilState 를 통해서 useState 처럼 사용하려면 atom 으로 하나더 만들어서 filter 기준 나눠주고 사용하는 예시가 있긴한데 이해가 잘 안감 나중ㅇ 다시보기