투두리스트 안 보고 처음 부터 만들어 보기
우선 npm create react-app . 으로 환경을 만들었다.
1. components 폴더와 css폴더를 만들었다.
2. app.jsx에 Header, Input, Contents, Contents 순서대로 컴포넌트를 선언했다.
3 Header컴포넌트로 헤더를 만들었다.
4 내용을 담을 배열을 todoContents로 선언하고
const[todo, setTodo] = useState(todoContents); 로 state를 선언했다.
5. Contents컴포넌트 안에 Todo,done제목은 active를 통해 삼항연산자로 작성해주고
TodoList컴포넌트를 선언했다.
6. TodoList컴포넌트에 작성하면 나올 내용의 구조를 만들어주고 props로 받은 todo를 filter,map을 이용해 done과 todo로 나누었다.
7. Input컴포넌트에 form으로 감싼 input두개와 button을 만들었다. form에 onSubmit속성으로 새로고침 방지,
제목 또는 내용 빈칸 방지, onChange와 setTodo를 이용해 새로운 글 추가, 추가시 Input 빈칸 전환 등을 만들었다.
8. 다시 TodoList로 돌아와 삭제와 완료,취소를 만들려고 했지만 실패.
(다시 시도 TodoList에서 return.filter.map안에 넣어서 성공)
제작 영상
https://www.youtube.com/watch?v=tb_x8-cQdSE&t=132s
아예 안보고 만들려는 시도 자체가 공부에 많은 도움이 되는 것 같다.
