리액트를 공부하고 처음으로 만든 토이 프로젝트인 투 두 리스트!
디자인부터 프로젝트 세팅, 기능 구현까지 하나 쉬운 것 없었지만 그래도 해내서 뿌듯하다.
기술 스택: 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에서 여러 프로젝트를 참고하였고, 스크랩하는걸 잊어서 출처를 남기지 못했다..
조니님의 Styled Components 로 Dark Mode 구현하기
'PROJECT > TO DO LIST' 카테고리의 다른 글
MSW(Mock Service Worker) 연결하기 (0) | 2024.03.20 |
---|---|
React, styled-components 환경에서 폰트 적용하기 (0) | 2024.01.13 |