온풀투데이

투두리스트를 구현하기 위해 컴포넌트는 크게 다섯 부분으로 분리했다. 아래 App() 에서 반환하고 있는 컴포넌트를 살펴보면, 메인 템플렛 하위에 헤더, 필터, 캘린더, 투두, 푸터로 구성한 것을 확인할 수 있다. MainTemplate.jsx import React from 'react'; import styled from 'styled-components'; const StyledDiv = styled.div` box-sizing: border-box; width: 100%; height: 100%; `; const MainTemplate = ({ children }) => { return ( {children} ); }; export default MainTemplate; MainTemplate.js..

리액트의 컴포넌트 구성과 useState, useRef, useEffect 등의 hook 의 기본 개념을 활용하기 위해 react-create-app(CRA)를 통해 투두리스트를 제작하였다. 각 날짜별 TODO 리스트를 구현하고자 react-calendar 라이브러리를 활용하였고, 컴포넌트 간 props의 전역관리를 위해 Context API 라는 리액트 내장 라이브러리를 활용하여 구현하였다. 작성일 기준 완성된 화면은 아래와 같다. '벨로퍼트와 함께하는 모던 리액트'라는 오픈 문서를 참고하여 리액트 기초 지식을 배울 수 있었고, 해당 문서에서 제공하는 예제를 활용하여 투두리스트 부분의 뼈대를 완성할 수 있었다. 이후 헤더, 푸터, 반응형 등의 디자인 및 필터 기능, 달력 기능, 편집 및 삭제 기능 등을..