React To-Do 앱의 구조 소개

오늘은 자신의 To-do-앱을 React로 만드는 것에 대한 첫걸음을 내딛습니다. 이전 연습을 거쳐 이제 학습한 지식을 적용하고 실용적인 프로젝트를 만드는 시간입니다. 이 튜토리얼에서는 To-do-앱의 구조뿐만 아니라 해당 기능을 실현하기 위해 어떤 구성 요소가 필요한지를 알아봅니다. 그러니 바로 본론으로 들어가 봅시다!

가장 중요한 교훈들

• 기본 To-do-앱 구조를 만드는 방법을 배우게 될 것입니다.
• 이 앱은 두 가지 주요 구성 요소, 새로운 To-do를 입력하는 ToDoInput 및 To-do를 표시하는 ToDoList로 구성됩니다.
• To-dos 목록을 관리하기 위해 React 상태를 사용합니다.

단계별 안내

단계 1: 프로젝트 설정

시작하려면 새로운 컴포넌트 배열을 만들고 app.jsx에서 필요하지 않은 부분을 모두 제거합니다. 그 이전 구현 사항을 해당 파일에서 모두 삭제하세요.

단계 2: 컴포넌트 계획

To-do-앱의 구조를 계획하세요. 두 가지 주요 컴포넌트인 ToDoInput(새로운 To-do 입력) 및 ToDoList(To-dos 표시)를 식별하세요.

단계 3: 컴포넌트 생성

ToDoInput 컴포넌트를 생성하세요. 입력 컴포넌트의 기본 구조를 구축하기 시작할 수 있습니다. 이는 To-do 텍스트를 입력하는 입력 필드와 추가 버튼을 포함해야 합니다.

단계 4: ToDoList 컴포넌트 추가

이제 두 번째 컴포넌트인 ToDoList를 만들어 보겠습니다. 이러한 컴포넌트들은 표시되어야 하지만 내용은 나준 시기에 채우게 될 것입니다.

단계 5: app.jsx에 컴포넌트 가져오기

app.jsx에서 두 개의 새로운 컴포넌트를 가져옵니다. 각 이름을 올바르게 사용하는지 확인하세요. 그런 다음 두 컴포넌트를 Render 메서드에 추가하세요.

단계 6: ToDoInput 내 요소 디자인

ToDoInput을 디자인하기 위해 "New To Do:" 타이틀을 위한 과 입력 필드를 추가하세요. 입력 필드의 유형을 텍스트로 설정하여 사용자가 텍스트를 입력할 수 있도록합니다.

단계 7: 상태 관리 평가

To-do 텍스트를 위한 상태를 생성하세요. 입력 값을 관리하기 위해 useState를 사용하고 초기 값은 빈 문자열로 설정하세요. 또한 입력 시마다 상태를 업데이트하기 위해 onChange 이벤트를 추가하세요.

단계 8: To-do 목록을 위한 앱 컴포넌트 준비

app.jsx에서도 To-dos 목록을 저장할 수 있는 방법에 대해 고려해보세요. 이후 관리하기 위해 To-do 요소를 위한 상태를 만들어야 합니다.

단계 9: To-dos 초기화

App 컴포넌트에서 To-do 배열을 최소한 하나의 To-do 객체(텍스트 및 상태에 대한 예: 미완료 시 false)로 초기화하세요.

단계 10: ToDoList에 Props 채우기

To-do 배열을 ToDoList 컴포넌트에 Props로 전달하세요. ToDoList가 배열에 액세스할 수 있도록 Props의 구조를 올바르게 정의하는지 확인하세요.

단계 11: To-dos 표시

To-do를 ToDoList에서 표시하기 위해 map 함수를 사용하세요. 각 To-do 요소에 대해 To-do 텍스트를 표시하는