Trello Clone

📚 useSelector

Recoil의 Selector란 Recoil에서 제공하고 있는 순수함수의 개념이다. Selector는 Derived State 즉, 파생된 State를 저장하며 가공하여 return해 줄 수 있는 함수이다. Selector를 이용하여 atom을 적게 만들고 그 값에 접근하기 용이하도록 코드를 작성할 수 있다! 😁

❤️‍🔥 최소한의 상태 집합만 atom에 저장하고 다른 모든 파생되는 데이터는 Selector에 명시한 함수를 통해 효율적으로 계산함으로써 쓸모없는 상태의 보존을 방지한다.

import { selector } from "recoil";

🤭 Get 함수 사용해 보기

atom.ts

export const minuteState = atom({
  key: "minutes",
  default: 0,
});

export const hourSelector = selector({
  key: "hours",
  get: ({ get }) => {
    const minutes = get(minuteState);
    return minutes / 60;
  },
});

👉🏻 Selector는 get 함수를 이용해 다양한 atom을 가져올 수 있다.

App.tsx

 const [minutes, setMinutes] = useRecoilState(minuteState);
 const hours = useRecoilValue(hourSelector);
 const onMinutesChange = (event: React.FormEvent<HTMLInputElement>) => {
    setMinutes(+event.currentTarget.value);
  };
  return (
    <div>
      <input
        value={minutes}
        onChange={onMinutesChange}
        type="number"
        placeholder="Minutes"
      />
      <input value={hours} type="number" placeholder="Hours" />
    </div>
  );

👉🏻 Selector가 반환하는 값을 다루고 싶다면 useRecoilValue의 인자에 Selector 이름을 넣어 사용한다.
✅ 값을 읽기 전용으로 사용하고 싶다면 useRecoilValue, set 함수도 함께 사용하고 싶다면 useRecoilState를 이용한다.

🫢 Set 함수 사용해 보기

atom.ts

export const hourSelector = selector<number>({
  key: "hours",
  get: ({ get }) => {
    const minutes = get(minuteState);
    return minutes / 60;
  },
  set: ({ set }, newValue) => {
    const minutes = Number(newValue) * 60;
    set(minuteState, minutes);
  },
});

👉🏻 set 함수는 두 번째 인자로 변경될 값을 가질 수 있다. 우리가 입력한 값을 함수 내에서 변경하여 다른 값으로 만들어 줄 수 있다.

App.tsx

const [minutes, setMinutes] = useRecoilState(minuteState);
const [hours, setHours] = useRecoilState(hourSelector);
const onMinutesChange = (event: React.FormEvent<HTMLInputElement>) => {
    setMinutes(+event.currentTarget.value);
  };
  const onHoursChange = (event: React.FormEvent<HTMLInputElement>) => {
    setHours(+event.currentTarget.value);
  };
  return (
    <div>
      <input
        type="number"
        placeholder="Minutes"
      />
      <input
        onChange={onHoursChange}
        value={hours}
        type="number"
        placeholder="Hours"
      />
    </div>
  );

👉🏻 이제 시간에 대한 input 태그에서 값을 받아서, hourSelector로 넘겨 minuteState 값으로 변환시켜 보여줄 수 있다. 각각의 시간과 분의 onChange 함수로 값의 변화를 관찰하여야 한다.

🐥 react-beautiful-dnd

화면의 요소를 드래그하고 사용자가 원하는 위치에 드랍할 수 있는 기능을 손쉽게 만들 수 있는 라이브러리이다.

Droppable은 드래그 & 드랍이 가능한 부분을 뜻하고, Draggable은 드래그 & 드랍이 가능한 요소를 뜻한다. 전자의 자식 요소로 후자가 들어가 있어야 함! 🔥

App.tsx

const toDos = ["a", "b", "c", "d", "e", "f"];

function App() {
  const onDragEnd = () => {};
  return (
    <DragDropContext onDragEnd={onDragEnd}>
      <Wrapper>
        <Boards>
          <Droppable droppableId="one">
            {(magic) => (
              <Board ref={magic.innerRef} {...magic.droppableProps}>
                {toDos.map((toDo, index) => (
                  <Draggable draggableId={toDo} index={index}>
                    {(magic) => (
                      <Card
                        ref={magic.innerRef}
                        {...magic.dragHandleProps}
                        {...magic.draggableProps}
                      >
                        {toDo}
                      </Card>
                    )}
                  </Draggable>
                ))}
                {magic.placeholder}
              </Board>
            )}
          </Droppable>
        </Boards>
      </Wrapper>
    </DragDropContext>
  );
}

👉🏻 DragDropContext의 파라미터로 드래그와 드랍이 끝났을 때 수행될 onDragEnd 함수를 꼭 넘겨주어야 한다. 자식 요소들이 타 일반 라이브러리와 다르게 함수 형태로 감싸져 있다.

👀 Draggable 요소들의 Reordering

드래그와 드랍이 끝났을 때 수행하는 함수로써 기존의 배열 형태를 바꿔 주지 않으면 원래 형태 그대로 map 함수를 실행시키기 때문에 순서가 바뀌지 않음!! 🙅🏻‍♀️ 따라서 onDragEnd 함수 내에서 기존의 배열을 꼭 변형시켜 주어야 함.

const onDragEnd = ({ draggableId, destination, source }: DropResult) => {
    if (!destination) return;
    setToDos((oldToDos) => {
      const toDosCopy = [...oldToDos];
      // 1) Delete item on source.index
      console.log("Delete item on", source.index);
      console.log(toDosCopy);
      toDosCopy.splice(source.index, 1);
      console.log("Deleted item");
      console.log(toDosCopy);
      // 2) Put back the item on the destination.index
      console.log("Put back", draggableId, "on ", destination.index);
      toDosCopy.splice(destination?.index, 0, draggableId);
      console.log(toDosCopy);
      return toDosCopy;
    });
  };

👉🏻 드래그와 드랍이 끝났을 때 그 결과를 객체로 받아오기 때문에 인자로 드래그 된 요소의 아이디와 시작점, 도착점을 넣어준다. 만약 시작점 그대로의 위치에서 드래그와 드랍이 끝났다면, destination이 존재하지 않을 것이므로 함수를 그대로 return 시켜준다.
✅ 기존의 배열을 가져와 움직인 요소를 삭제 ➡️ 도착점의 index에 요소 삽입 ➡️ setToDos를 통해 새로운 배열 저장