본문 바로가기

할 일 목록2

[클론 코딩] TODO LIST 기능 구현 지난 포스트에서 기본세팅과 UI를 구성했습니다. 이제 껍질의 내용물들을 구현해보도록 하겠습니다. 1. todos 우리가 만드는 TODO 앱은 App.js에서 배열의 형태로 관리됩니다. 그러기 위해서 useState Hook를 이용해서 todo를 관리하고 이 todos배열을 TodoList 컴포넌트의 props로 전달해서 보여주게 됩니다. const App = () => { const [todos, setTodos] = useState([ { id: 1, text: 'TODO LIST 앱 완성하기', checked: true, }, { id: 2, text: '블로그 포스팅하기', checked: false, }, ]); return ( ); }; todos 배열을 뜯어보고 지나가자면, 배열안에는 각 항목.. 2021. 12. 21.
[클론 코딩] TODO LIST 여기저기를 뒤져보니 리액트를 기초적으로 배우고 난뒤에는 TODO LIST를 만들어 보는 것이 마치 국룰처럼 자리잡아 있었습니다. 그래서 저도 시작은 TODO 리스트로 결정했습니다. 클론 코딩 대상은 리액트로 유명한 VELOPERT 님의 TODO LIST를 가지고 따라가 보도록 하겠습니다. 기본적으로 큰 틀은 따라가되 일부분에서는 제 개인 성향이 들어간 수정이 있을 예정입니다. 0. 사전 준비 우선 yarn create react-app으로 프로젝트를 위한 공간을 만들어 줍니다. 저는 todo-list라는 이름으로 작업공간을 만들었습니다. 그리고 우리가 사용할 react-icons와 classnames, node-sass를 설치해줍니다. react-icons는 리액트에서 여러 아이콘 디자인들을 사용할 수 .. 2021. 12. 20.
300x250