[TodoList] 기능 구현 준비하기

* 기능 구현 준비하기 

1. Editor 컴포넌트에 새로운 투두를 입력하고 추가 버튼을 클릭하면 List 컴포넌트에 새로운 투두가 바로 추가되어야 함. 

2. 추가된 투두를 List 컴포넌트 내부에서 수정 및 삭제가 가능해야 함. 

3. 이미 추가 된 투두가 검색창에서 검색도 가능해야 함. 

 

즉 ,  정리해보자면 다음과 같은 구현이 필요하다. 

- Todo 추가하기 

- Todo 리스트 렌더링 하기

- Todo  수정하기 

- Todo  삭제하기 

 

 

본격적인 기능 구현에 앞서, 상태 관리 (State)를 추가해주고 더미 데이터를 만들어 두기로 하자 .

 

1. React의 useState를 사용하여 Todo 목록을 상태로 관리

const [todos, setTodos] = useState(mockData);

 

💡 todos: Todo 항목들이 담긴 배열로, UI에 표시되는 데이터의 기본 상태

      setTodos: Todo 목록을 업데이트하기 위한 함수

       (항목 추가, 삭제, 상태 변경 시 이 함수로 상태를 업데이트할 예정)

 

---

2. 더미 데이터(mockData) 준비

Todo 목록의 초기 상태를 설정하기 위해 더미 데이터를 작성했다. 

const mockData = [
  {
    id: 0, 
    isDone: false,
    content: "React 공부하기",
    date: new Date().getTime(),
  },
  {
    id: 1, 
    isDone: false,
    content: "빨래하기",
    date: new Date().getTime(),
  },
  {
    id: 2, 
    isDone: false,
    content: "노래 연습하기",
    date: new Date().getTime(),
  },
];

 

 

---

3. 개발자 도구 > Components 확인 

앱 컴포넌트를 클릭해서 데이터를 살펴보니 

State 안에 3개의 Todo가 잘 저장된 것을 볼 수 있었다.