TodoList 제작!

정말 기본중의 기본인 TodoList를 구현해 보았다.
구글링을 해보며 투두리스트를 제작하기 위한 기본 컴포넌트와 기능 구현을 어떻게 해야 하는지를 분석하였으며, 특히 js를 이용해 기능을 구현하려면 어떤 함수를 써야 하는지를 알게 되었다.

App.js에서 화면에 나올 기본 레이아웃 구성

<container>
  <h1>오늘의 ToDo List!</h1>
  <TodoList todos={todos} toggleTodo={toggleTodo} deleteTodo={deleteTodo} />
  <AddTodo addTodo={addTodo} />
</container>

container div로 제목과 TodoList, AddTodo 을 감싼 형태로 화면에 구현하였다.

TodoList의 기본적인 레이아웃 구성

<ul>
  {todos.map((todo, index) => (
    <TodoItem
      key={index}
      index={index}
      todo={todo}
      toggleTodo={toggleTodo}
      deleteTodo={deleteTodo}
    />
  ))}
</ul>

TodoList 를 ul로 감싸 순서 없는 목록을 나타냅니다. map 함수로 반환된 여러 TodoItem 컴포넌트 아이템들이 리스트에 들어갑니다.

TodoItem의 기본적인 레이아웃 구성

    <li stlye={{ textDecoration: todo.completed ? 'line-through' : ''}}>
        {todo.text}
        <button onClick={() => togleTodo(index)}>완료</button>
        <button onClick={() => deleteTodo(index)}>삭제</button>
    </li>

li 태그를 이용해 TodoList에 ul태그 안에 순차적으로 나타나게 합니다.
inline-style을 이용해 간단한 textDecoration을 넣었고 완료 버튼을 누르면 자동으로 해당 Item에 취소 선을 만들게 했습니다.

onClick이라는 이벤트를 넣고 그곳에 이 버튼을 누르면 어떤 이벤트가 발생하게 되는 기능을 삽입했습니다.

AddTodo 기본 레이아웃

    <form onSubmit ={handleSubmit}>
        <input 
        type="text"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        />
        <button tpye="submit">추가</button>
        </form>
        

form 태그를 이용해 텍스트를 입력할 수 있는 창이 생기고 onSubmit 이벤트 핸들러는 form이 제출될 때 실행할 함수를 지정한다. {handleSubmit} 함수가 호출되는 것을 의미한다.

type에 submit을 지정해 줘 버튼을 클릭하면 위의 handleSubmit 함수를 실행하게 한다.