이 실습에서는 지금까지 학습한 React 개념들을 종합하여 간단한 할 일 목록(Todo List) 애플리케이션을 만들어 보겠습니다.
이 과정을 통해 컴포넌트 구조 설계, state 관리, props를 통한 데이터 전달, 조건부 렌더링, 리스트 렌더링, 그리고 이벤트 처리 등의 개념을 실제로 적용해 볼 수 있습니다.
1단계 : 프로젝트 설정
먼저 새로운 React 프로젝트를 생성합니다.
2단계 : 컴포넌트 구조 설계
우리의 Todo List 앱은 다음과 같은 컴포넌트 구조를 가집니다.
App
: 최상위 컴포넌트
TodoList
: 할 일 목록을 관리하고 표시하는 컴포넌트
TodoItem
: 개별 할 일 항목을 표시하는 컴포넌트
AddTodoForm
: 새로운 할 일을 추가하는 폼 컴포넌트
3단계 : 컴포넌트 구현
App
컴포넌트는
useState
훅을 사용하여 할 일 목록 상태를 관리합니다.
- 할 일 추가, 토글, 삭제 함수를 정의하고 이를 하위 컴포넌트에 props로 전달합니다.
TodoList
컴포넌트는
todos
배열을 props로 받아 각 할 일에 대해 TodoItem
컴포넌트를 렌더링합니다.
map
함수를 사용하여 리스트를 렌더링하며, 각 항목에 고유한 key
를 제공합니다.
TodoItem
컴포넌트는
- 개별 할 일 항목을 표시합니다.
- 체크박스를 통해 완료 상태를 토글할 수 있습니다.
- 조건부 스타일링을 사용하여 완료된 항목에 취소선을 표시합니다.
- 삭제 버튼을 통해 항목을 제거할 수 있습니다.
AddTodoForm
컴포넌트는
- 로컬 state를 사용하여 입력 필드의 값을 관리합니다.
- 폼 제출 시 새로운 할 일을 추가하고 입력 필드를 초기화합니다.
4단계 : 상태 관리 및 Props 전달
App
컴포넌트에서 todos
상태와 관련 함수들을 관리합니다.
- 이 상태와 함수들을 props를 통해 하위 컴포넌트로 전달합니다.
useState
훅을 사용하여 컴포넌트의 상태를 관리합니다.
5단계 : 조건부 렌더링
TodoItem
컴포넌트에서 조건부 렌더링을 사용하여 완료된 항목에 취소선을 적용합니다.
6단계 : 리스트 렌더링
TodoList
컴포넌트에서 map
함수를 사용하여 할 일 목록을 렌더링합니다.
7단계 : 이벤트 처리
TodoItem
에서 체크박스 변경과 삭제 버튼 클릭 이벤트를 처리합니다.
AddTodoForm
에서 폼 제출 이벤트를 처리합니다.
8단계 : 스타일링 (선택사항)
간단한 CSS를 추가하여 앱의 외관을 개선할 수 있습니다.
App.css
파일에 다음과 같은 스타일을 추가할 수 있습니다.
최종 결과
이렇게 구현된 Todo List 앱은 다음과 같은 기능을 갖습니다.
- 할 일 목록 표시
- 새로운 할 일 추가
- 할 일 완료/미완료 토글
- 할 일 삭제
이 실습을 통해 우리는 다음과 같은 React 개념들을 실제로 적용해 보았습니다.
- 컴포넌트 구조 설계 및 구현
useState
훅을 사용한 상태 관리
- props를 통한 데이터 및 함수 전달
- 조건부 렌더링 (완료된 항목 스타일링)
- 리스트 렌더링 (
map
함수 사용)
- 이벤트 처리 (폼 제출, 체크박스 변경, 버튼 클릭)
- 간단한 폼 처리
이 Todo List 앱은 기본적인 기능만을 구현했지만, 여기에 더 많은 기능을 추가할 수 있습니다.
예를 들어, 로컬 스토리지를 사용하여 할 일 목록을 저장하거나, 할 일 항목 편집 기능, 완료된 항목 필터링 등의 기능을 추가할 수 있습니다.
이러한 추가 기능을 구현하면서 useEffect 훅의 사용, 더 복잡한 상태 관리, 컴포넌트 분리 등의 고급 React 개념들을 학습할 수 있습니다.
이 기본적인 Todo List 앱은 React의 핵심 개념을 실습해보고, 더 복잡한 애플리케이션을 개발하기 위한 좋은 출발점이 될 것입니다.