📚 Reference

• 공식 문서 1

🔖 Index

Todo List

• Next.js + Recoil

1. 설치

   • yarn
   • CNA (Create Next App)
   • Recoil

2. 디렉토리 구조

   .next
   api
   components
   	├── todoItem.tsx
   	├── todoItemCreator.tsx
   	├── todoList.tsx
   	├── todoListFilters.tsx
   	└── todoListStats.tsx
   node_modules
   pages
   	├── _app.tsx
   	└── index.tsx
   public
   states
   	├── filteredTodoListState.ts
   	├── todoListFilterState.ts
   	├── todoListState.ts
   	└── todoListStatsState.ts
   styles
   .eslintrc.json
   .gitignore
   .prettierrc.json
   next-env.d.ts
   next.config.js
   package.json
   README.md
   tsconfig.json
   yarn-error.log
   yarn.lock
   

3. pages > _app.tsx

   • <RecoilRoot> 태그 추가

     import type { AppProps } from 'next/app';
     import { RecoilRoot } from 'recoil';
     import '../styles/globals.css';
     
     function MyApp({ Component, pageProps }: AppProps) {
       return (
         <>
           <RecoilRoot>
             This is _app.tsx
             <Component {...pageProps} />
           </RecoilRoot>
         </>
       );
     }
     
     export default MyApp;
     

4. 인터페이스 생성

• lib > client > interface.ts

  export interface TodoList {
    id: number;
    text: string;
    isComplete: boolean;
  }
  

1. 전역 상태 관리 생성

   • states 폴더 안에 생성
   1. todoListState.ts

   import { atom } from 'recoil';
   import { v1 } from 'uuid';
   import { TodoList } from '../lib/client/interfaces';
   
   export const todoListState = atom<TodoList[]>({
     key: `TodoList-${v1()}`,
     default: [{ id: 0, text: 'hello', isComplete: true }],
   });
   

   2. todoListFilterState.ts

   import { atom } from 'recoil';
   import { v1 } from 'uuid';
   
   // Show All, Show Completed, Show Uncompleted
   export const todoListFilterState = atom<string>({
     key: `TodoListFilter-${v1()}`,
     default: 'Show All',
   });
   

   3. todoListStatsState.ts

   import { selector } from 'recoil';
   import { v1 } from 'uuid';
   import { todoListState } from './todoListState';
   
   export const todoListStatsState = selector({
     key: `TodoListStats-${v1()}`,
     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) * 100;
   
       return {
         totalNum,
         totalCompletedNum,
         totalUncompletedNum,
         percentCompleted,
       };
     },
   });
   

   4. filteredTodoListState.ts

   import { selector } from 'recoil';
   import { v1 } from 'uuid';
   import { todoListFilterState } from './todoListFilterState';
   import { todoListState } from './todoListState';
   export const filteredTodoListState = selector({
     key: `FilteredTodoList-${v1()}`,
     get: ({ get }) => {
       const filter = get(todoListFilterState);
       const list = get(todoListState);
   
       switch (filter) {
         case 'Show Completed':
           return list.filter((item) => item.isComplete);
         case 'Show Uncompleted':
           return list.filter((item) => !item.isComplete);
         default:
           return list;
       }
     },
   });
   

2. 기능 정의

   • todo 아이템 생성
   • todo 아이템 편집
   • todo 아이템 삭제
   • todo 아이템 필터
   • 유용한 상태 출력

3. 컴포넌트 생성

   1. todoItem.tsx

   import { ChangeEvent } from 'react';
   import { useRecoilState } from 'recoil';
   import { TodoList } from '../lib/client/interfaces';
   import { todoListState } from '../states/todoListState';
   
   export default function TodoItem({ item }: { item: TodoList }) {
     const [todoList, setTodoList] = useRecoilState(todoListState);
     const index = todoList.findIndex((listItem) => listItem === item);
   
     const editItemText = (event: ChangeEvent<HTMLInputElement>) => {
       const newList = replaceItemAtIndex(todoList, index, {
         ...item,
         text: event.target.value,
       });
   
       setTodoList(newList);
     };
   
     const toggleItemCompletion = () => {
       const newList = replaceItemAtIndex(todoList, index, {
         ...item,
         isComplete: !item.isComplete,
       });
   
       setTodoList(newList);
     };
   
     const deleteItem = () => {
       const newList = removeItemAtIndex(todoList, index);
   
       setTodoList(newList);
     };
   
     return (
       <div>
         <input type="text" value={item.text} onChange={editItemText} />
         <input
           type="checkbox"
           checked={item.isComplete}
           onChange={toggleItemCompletion}
         />
         <button onClick={deleteItem}>X</button>
       </div>
     );
   }
   
   function replaceItemAtIndex(
     arr: TodoList[],
     index: number,
     newValue: TodoList,
   ) {
     return [...arr.slice(0, index), newValue, ...arr.slice(index + 1)];
   }
   
   function removeItemAtIndex(arr: TodoList[], index: number) {
     return [...arr.slice(0, index), ...arr.slice(index + 1)];
   }
   

2. todoItemCreator.tsx

import { ChangeEvent, useState } from 'react';
import { useRecoilState } from 'recoil';
import { todoListState } from '../states/todoListState';

export default function TodoItemCreator() {
  const [inputValue, setInputValue] = useState('');
  const [todoList, setTodoList] = useRecoilState(todoListState);

  // utility for creating unique Id
  function getId() {
    return todoList.length > 0 ? todoList[todoList.length - 1].id + 1 : 0;
  }

  const addItem = () => {
    setTodoList((oldTodoList) => [
      ...oldTodoList,
      {
        id: getId(),
        text: inputValue,
        isComplete: false,
      },
    ]);
    setInputValue('');
  };

  const onChange = (event: ChangeEvent<HTMLInputElement>): void => {
    console.log('>>>> onChange:', event);
    setInputValue(event.target.value);
  };

  return (
    <div>
      <input type="text" value={inputValue} onChange={onChange} />
      <button onClick={addItem}>Add</button>
    </div>
  );
}