React Tip

---

리스트 렌더링

• 태그 반복시, map, filter 사용
• key 값은 필수
• 2개 이상의 Element를 리스팅하려면 React-Fragment를 사용한다.

export default function App() {
  const [hideCompleted, setHideCompleted] = useState(false);
  const todos = [
    { id: 1, text: "HTML 배우기", done: true },
    { id: 2, text: "JavaScript 배우기", done: true },
    { id: 3, text: "React 배우기", done: false },
  ];
  return (
    <>
      <ul>
        {todos
          .filter((todo) => {
            console.log(hideCompleted);
            if (hideCompleted) return todo.done;
            else return todo;
          })
          .map((todo) => (
            <li key={todo.id}>
              <span>{todo.text}</span>
            </li>
          ))}
      </ul>
      <button onClick={() => setHideCompleted(!hideCompleted)}>토글</button>
    </>
  );
}

---

연결문서