wanted-moducompany-project

기업과제로 4인이서 같이 만든 코드를 분석 해보려 한다.

이러한 폴더 구조를 가지고 있다.

 

App.js 에서 분석을 시작 해보려한다.

1. Global style로 전체적인 틀의 스타일을 잡는다.

2. Provider로 state를 넘겨줄 컴포넌트를 감싼다.

<AppLayout>
          <TodoContainer />
        </AppLayout>

 

→ TodoProvider 이동

TodoProvider에서 받아올 state와 action의 Type을 지정 해준다.

const TodoContext = createContext<ITodoContext>(defaultValue);

전역상태관리를 해줄 context를 만든다. defaultValue를 넣지 않으면 오류가 뜬다.

TodoProvider에서 받아올 함수들은 useTodoItems에 있다.

 

→ useTodoItems

CURD의 기능이 담겨져있다.

context 전역상태를 사용할 곳에서 useContext를 통해 가져오면 된다.

 

기타 함수

const sortDate = (current: Itodo[]) => {
    const sortD = [...current].sort((a, b) =>
      a.createdAt.localeCompare(b.createdAt)
    );
    return sortD;
  };

  const sortImportance = (current: Itodo[]) => {
    const sortI = [...current].sort((a, b) =>
      a.importance.localeCompare(b.importance)
    );
    return sortI;
  };

const todoSort = useCallback(
    (selectName: string): Itodo[] => {
      switch (selectName) {
        case 'Date':
          return sortDate(todoItems);
        case 'Importance':
          return sortImportance(todoItems);
        default:
          return todoItems;
      }
    },
    [todoItems]
  );

 

여러 코드들을 보고 분석하여 이해 할 수 있는 능력을 쌓으면 실력이 많이 늘 것 같아,

완료