React Course 1-2 | State, Events, and Forms

1. map으로 loop하여 리스트 출력하기

PackingList component : ul로 감싼 후 array.map((개별아이템) => (<Item prop이름={개별아이템} />)) 로 넘겨준다.
Item component : li로 props를 받아 각각의 값을 출력한다.

function PackingList() {
  return (
    <ul className="list">
      {initialItems.map((eachItem) => (
        <Item itemObj={eachItem} />
      ))}
    </ul>
  );
}

function Item({ itemObj }) {
  return <li>{itemObj.description}</li>;
}

2. Array.from

{Array.from({ length: 20 }, (_, i) => i + 1)}
// (20) [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]

3. State VS. Props

State: Internal data, owned by component

Props: External data, owned by parent component