리액트로 Todo 앱 만들기: 실전 프로젝트
안녕하세요! 리액트 학습 여정의 네 번째 글에 오신 것을 환영합니다. 오늘은 실제 프로젝트를 통해 리액트의 핵심 개념들을 적용해보겠습니다. 우리가 만들 프로젝트는 바로 Todo 앱입니다!
프로젝트 개요
우리가 만들 Todo 앱의 주요 기능은 다음과 같습니다:
- 할 일 목록 표시
- 새로운 할 일 추가
- 할 일 삭제
컴포넌트 구조 설계
리액트의 핵심은 컴포넌트입니다. 우리의 Todo 앱을 다음과 같이 컴포넌트로 나눠봅시다:
TodoBoard: 전체 앱을 감싸는 최상위 컴포넌트TodoItem: 개별 할 일 항목을 표시하는 컴포넌트
코드 구현
1. TodoBoard 컴포넌트
먼저 TodoBoard 컴포넌트를 만들어봅시다.
jsx
importReact,{ useState
}from'react';importTodoItemfrom'./TodoItem';functionTodoBoard(){const[inputValue,
setInputValue]=useState('');const[todoList,
setTodoList]=useState([]);constaddItem=()=>{setTodoList([...todoList,
inputValue]);setInputValue('');}return(<div><h2>Todo
List</h2><inputvalue={inputValue}onChange={(e)=>setInputValue(e.target.value)}placeholder="할
일을
입력하세요"/><buttononClick={addItem}>추가</button>{todoList.map((item,
index)=>(<TodoItemkey={index}item={item}/>))}</div>);}exportdefaultTodoBoard;
이 컴포넌트에서 주목할 점:
-
useState를 사용하여 입력값(inputValue)과 할 일 목록(todoList)을 관리합니다. addItem함수는 새로운 할 일을 목록에 추가합니다.-
map함수를 사용하여todoList의 각 항목을TodoItem컴포넌트로 렌더링합니다.
2. TodoItem 컴포넌트
이제 개별 할 일 항목을 표시할 TodoItem 컴포넌트를 만들어봅시다.
jsx
importReactfrom'react';functionTodoItem({ item
}){return(<divclassName="todo-item">{item}</div>);}exportdefaultTodoItem;
이 컴포넌트는 props로 전달받은 item을 표시합니다.
3. 스타일 추가
앱의 모양을 개선하기 위해 간단한 CSS를 추가해봅시다.
css
.todo-item{background-color:#f0f0f0;margin:10px0;padding:10px;border-radius:5px;}
이 CSS를 별도의 파일로 만들고 필요한 컴포넌트에서 import하거나, 인라인 스타일로 적용할 수 있습니다.
주요 리액트 개념 설명
-
컴포넌트:
TodoBoard와TodoItem은 각각 독립적인 컴포넌트로, 재사용성과 유지보수성을 높입니다. -
State:
useState훅을 사용하여inputValue와todoList를 관리합니다. 이들은 컴포넌트의 상태를 나타내며, 변경 시 리렌더링을 트리거합니다. -
Props:
TodoItem컴포넌트는itemprop을 통해 표시할 내용을 전달받습니다. 이는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방식입니다. -
이벤트 처리:
onChange와onClick이벤트를 사용하여 사용자 입력을 처리합니다. -
리스트 렌더링:
map함수를 사용하여todoList배열의 각 항목을TodoItem컴포넌트로 변환합니다.
결론
이 간단한 Todo 앱을 통해 우리는 리액트의 핵심 개념들을 실제로 적용해보았습니다. 컴포넌트 구조, state 관리, props 전달, 이벤트 처리, 그리고 리스트 렌더링 등의 개념을 하나의 프로젝트에서 모두 사용해 보았습니다.
이 프로젝트를 기반으로 더 많은 기능(예: 할 일 완료 체크, 수정 기능 등)을 추가해 보는 것은 어떨까요? 리액트의 강력함을 직접 경험하며 여러분만의 Todo 앱을 발전시켜 나가세요!
다음 글에서는 이 프로젝트를 더욱 발전시키는 방법에 대해 알아보겠습니다. 리액트와 함께하는 여러분의 개발 여정을 응원합니다!
댓글 쓰기