React로 만든 TO DO LIST

리액트를 공부하고 처음으로 만든 토이 프로젝트인 투 두 리스트!

디자인부터 프로젝트 세팅, 기능 구현까지 하나 쉬운 것 없었지만 그래도 해내서 뿌듯하다.

기술 스택: React 18, Typescript, Styled-components, MSW

 

주소: https://semin-97.github.io/react-to-do-list/

Github: https://github.com/SEMIN-97/react-to-do-list

 

 

기능

✅ 아이템 추가

✅ 아이템 업데이트

 

✅ 아이템 삭제

✅ 다크/라이트 모드 지원

Rest API

API통신은 MSW(Mock Service Worker)를 통해 구현하였다.

아이템이 업데이트될 때 마다 List를 다시 불러오기 위해 API 호출 로직을 상위 컴포넌트에 정의하고, 메소드를 props로 전달하는 방식으로 제작하였다.

다음 프로젝트에는 상태관리 라이브러리나 Context를 이용해서 Props drilling를 피하도록 시도해야겠다.

export default function ToDoLayout({ isDarkMode, onToggleMode }: ToDoLayoutProps) {
  async function updateToDo(id: number, checked: boolean) {}
  async function deleteToDo(id: number) {}
  async function createToDo(text: string) {}

  return (
    <StyledLayout>
      <ThemeIcon isDarkMode={isDarkMode} onToggleMode={onToggleMode} />
      <H1>TO DO LIST</H1>
      <ProgressLayout>
        <ProgressIndicator percentage={percentage} />
      </ProgressLayout>
      <ToDoList
        toDos={toDos}
        onToggleCheck={updateToDo}
        onDeleteItem={deleteToDo}
      />
      <ToDoCreate
        onSubmit={createToDo}
      />
    </StyledLayout>
  );

 

다크 모드 적용

사용자의 color-scheme을 확인하고 라이트/다크모드를 확인하여 기본 값을 설정해주었다.

테마별 컬러를 미리 객체로 저장해두고, styled-components에서 제공하는 ThemeProvider를 통해 CSS root 변수에 컬러를 모드별 컬러를 넣어주었다.

// App.tsx
const themeMode: {[key: string]: any} = {
  light: lightTheme,
  dark: darkTheme
};

function App() {
  const isDarkModePreferred = window.matchMedia?.('(prefers-color-scheme: dark)').matches;
  const [isDarkMode, setIsDarkMode] = useState(isDarkModePreferred);
  const theme = isDarkMode ? 'dark' : 'light';

  function changeTheme() {
    setIsDarkMode(prev => !prev);
  }

  return (
    <ThemeProvider theme={themeMode[theme]}>
      <GlobalStyle />
      <ToDoLayout isDarkMode={isDarkMode} onToggleMode={changeTheme} />
    </ThemeProvider>
  );
}

 

마치며

많이 부족하지만 프로젝트 구조, 마크업, 탭 인덱스까지 하나하나 고민을 하며 작업했습니다.

CSS-in-JS나 tsx가 아직 많이 어색하지만 크게 나쁘진 않은 것같다. 오히려 atomic 하게 컴포넌트를 나누는데 더 집중하게 되는 것 같다.

MSW + Axios 이슈로 크로스브라우징을 챙기지 못한 점과 혼자 진행한 프로젝트라서 피드백을 받을 수 없던 것이 제일 아쉽다.

이 글들이 나처럼 리액트를 독학으로 공부하시는 분들께 도움이 되고, 좋은 인사이트를 얻어갈 수 있는 기회가 되면 좋겠다.

화이팅✨

 

Ref.

디자인 래퍼는 Behance에서 여러 프로젝트를 참고하였고, 스크랩하는걸 잊어서 출처를 남기지 못했다..

벨로퍼트님의 멋진 투두리스트 만들기

loooog님의[React] 간단한 투두리스트 만들기

Mdn, React 앱 컴포넌트화

조니님의 Styled Components 로 Dark Mode 구현하기