TIL-24.05.14

 

 

 

Recoil - SetterOrUpdater

 

SetterOrUpdater는 Recoil에서 상태를 업데이트하는 함수를 지칭합니다. 이 함수는 두 가지 역할을 수행합니다: Setter와 Updater.

Setter 함수: Setter 함수는 이전 상태를 완전히 덮어쓰는 역할을 합니다. 이전 상태를 무시하고 새로운 값을 설정하여 상태를 업데이트합니다. 이전 상태를 고려하지 않고 간단히 새로운 값을 설정하는 데 사용됩니다.

Updater 함수: Updater 함수는 이전 상태를 기반으로 새로운 값을 생성하여 상태를 업데이트합니다. 이전 상태와 새로운 값을 조합하여 새로운 상태를 생성하는 함수입니다. 이전 상태를 참조하여 업데이트를 수행하므로 이전 상태의 일부를 유지하면서 상태를 업데이트할 수 있습니다.

 

Recoil에서 상태를 업데이트하는 함수들은 대부분 이 두 가지 역할 중 하나를 수행합니다. SetterOrUpdater는 이러한 Setter와 Updater 함수를 모두 포괄하기 위한 타입입니다. 이것은 말 그대로 Setter일 수도 있고 Updater일 수도 있음을 의미합니다.
이러한 유형의 함수를 사용하면 Recoil 상태를 쉽게 업데이트할 수 있습니다. 상태를 변경할 때 이전 상태를 고려할 필요가 있는 경우에는 Updater 함수를 사용하고, 이전 상태를 무시하고 새로운 값을 설정해야 하는 경우에는 Setter 함수를 사용합니다.

 

 

 

 

 

 

import { SetterOrUpdater } from 'recoil';

const onDrageEnd = (setBoards: SetterOrUpdater<string[]>) => { 
  if (source.droppableId === 'boards') {
    setBoards((prev) => {
      const boardCopy = [...prev];
      const item = boardCopy.splice(source.index, 1)[0];
      boardCopy.splice(destination.index, 0, item);
      return boardCopy; //이 코드블럭에서는 updater함수로서 기능
    });
}
}

 

SetterOrUpdater는 Setter 함수와 Updater 함수 중 하나를 선택하여 사용할 것을 나타내는 타입입니다. 이것은 Recoil에서 상태를 업데이트하는 함수를 표현하는 데 사용됩니다.