TIL 18. React My Todo List 만들기

Mission: To-do List 페이지 만들기

1) 목적

• React를 사용하여 효율적인 UI를 개발하는 방법에 대한 이해를 높이기 위함.

2) 방법

1. React 문법으로 To-do list 페이지를 구현한다.
2. 컴포넌트를 통해 UI 재사용이 가능한 개별적인 조각으로 분할한다.

3) 문제

1. 완료 버튼이 화면상에 보이지 않았다.
   
2. 코드를 작성하기는 했지만, 코드의 기능과 각 컴포넌트의 역할을 이해하기 어려웠다.
   

4) 해결

1. 삭제 버튼과 완료 버튼을 통합하고, 이벤트 처리를 추가한다.
   
2. 코드의 각 부분에 주석을 추가하여 함수와 핸들러의 역할과 동작 방식을 분석했다.

5) 알게된 점

1. 컴포넌트를 작성하고 조합하여 복잡한 UI를 구축할 수 있었다.
   
   
2. 상태 관리 함수인 useState 훅을 사용하여 상태를 정의하고 변경할 수 있었다.
   
   
3. 이벤트 핸들러를 등록하고, 해당 이벤트가 발생했을 때 실행될 함수를 작성하는 이벤트 처리 방법을 배웠다.
   
   
4. map, filter 메서드를 사용하여 배열을 조작하는 방법을 배웠다.
   
   
5. CSS를 적용하기 위해 클래스 이름을 지정하고, CSS 파일에 해당 클래스 이름과 스타일을 매칭시킬 수 있었다.
   
   
6. props를 사용해 A 컴포넌트에서 B 컴포넌트로 데이터와 동작을 전달하는 방법을 배웠다.

6) 결과물

https://my-todo-list-nna-na.vercel.app/