[React_기초] 바꾸기(set) vs 초기화(reset) 제대로 알기

회사에서 기존 코드들을 참고하면서 개발할 때, Recoil 같은 상태 관리 라이브러리에서 사용하는 Hook들을 정리해둔 atom.js에는 주로 set 개념들로만 있었다.

하지만 가끔씩 한꺼번에 초기화하고 싶을 때가 많았는데, 그 때도 복잡한 방식으로 set으로 다시 정의해서 코드를 짠 적이 있었다😅
(예를 들어, 현재 화면의 모든 정보들이 이전 화면갔다가 다시 돌아오면 초기화하고 싶은 코드를 짜고 싶었음)

그 방식들이 개발하는 데 있어서 힘들게했고, 많은 시간을 들여야하는 단점이 있어서 훅에 대해 더 공부하고 기존 코드들을 더 살펴봤는데!!
'reset' 이라는 단어를 보게 되었고 이걸 활용하면 초기화할 수 있다라는 걸 알게 됐다..ㅠㅠ

import { atom, useResetRecoilState } from 'recoil';

// atom 정의
const todoListState = atom({
  key: 'todoListState',
  default: [],
});

function TodoComponent() {
  const resetTodoList = useResetRecoilState(todoListState);

  return (
    <div>
      <button onClick={resetTodoList}>초기화</button>
    </div>
  );
}

✅ 기억하자!
useRecoilState = set + get
useRecoilValue = 읽기만
useSetRecoilState = 쓰기만
useResetRecoilState = 초기값으로 되돌리기