ToDoList_리스트구현하기(map)

• map

---

ToDoList.jsx

import React, { useState } from "react";

export default function ToDoList() {
  const [todos, setTodos] = useState([
    { id: "123", text: "장보기", status: "active" },
    { id: "124", text: "공부하기", status: "active" },
  ]);
  return;
  <section>
    <ul>
      {todos.map((item) => (
        <li key={item.id}>{item.text}</li>
      ))}
    </ul>
  </section>;
}

1. initialState는 말 그대로 초기값일 뿐이고 state는 useState의 state에 저장된다. 그러므로 데이터를 참고할때는 useState의 state를 참고하자.

{todos.map((item) => (

 

2.이런식으로 작성해도 되는구나... 뭔가 꺽쇠안에 작성하는거는 익숙했는데 중괄호안에서 이렇게 작성해서 내뱉어주는거는 첨보는듯

      <ul>
        {todos.map((item) => (
          <li key={item.id}>{item.text}</li>
        ))}
      </ul>