[React JS]배열을 나열하던 코드를 객체 나열 코드로 바꾸기

기존의 코드는 배열내부의 데이터를 나열했다면 이번에는 배열 여러개를 감싸고 있는 객체를 나열하는 코드로 바꿔야한다.

이유는 메모보드를 하나가 아니라 여러개로 나누기로 했기 때문이다.

객체에 TO_DO, DOING,DONE 의 string 배열 세개를 담고 각 배열의 데이터를 나열해서 화면에 노출하는 코드로 바꾸기로한다.

기존 코드

atom.tsx

export const toDoState = atom<IToDoState>({
  key: 'toDo',
  default: ['a', 'b', 'c', 'd', 'e']
});

수정된 코드

atom.tsx

interface IToDoState {
  [key: string]: string[];
}
//App.tsx에서 Board import 시 toDos의 속성이 명시되지 않아 오류가 발생해서
//IToDoState 에 key의 타입과 그 타입의 속성을 명시하려고 interface를 만든다.

export const toDoState = atom<IToDoState>({
  key: 'toDo',
  default: {
    'TO DO': ['a', 'b', 'c', 'd', 'e'],
    DOING: [],
    DONE: [],
  },
});

App.tsx

function App(){
	const [toDos, setToDos] = useRecoilState(toDoState);
...
  return (
    <DragDropContext onDragEnd={onDragEnd}>
      <Wrapper>
        <Boards>
          {Object.keys(toDos).map((boardId) => (
            <Board key={boardId} boardId={boardId} toDos={toDos[boardId]} />
          ))}
        </Boards>
      </Wrapper>
    </DragDropContext>
  );
}
...