컴포넌트 관리

컴포넌트 관리 방법

1. 반복되는 컴포넌트 관리
   : 배열 메서드를 사용함 (ex. map())

   map() 함수의 key
   Warning: Each child in a list should have a unique "key" prop.

   • 에러 원인
     : 각 요소를 빠르게 찾고 비교하기 위해 key가 필요함
     : 일반적으로 UUID(Universally Unique Identifier)나 Date와 같은 요소를 key로 사용함

2. 독립적인 컴포넌트 관리
   : 각 컴포넌트를 별도로 생성하여 import/export와 props를 사용하여 관리함

// AS-IS
// App.jsx
function App() {
  const itemStyle = {};

  return (
    <>
      <div style={itemStyle}>후라이드</div>
      <div style={itemStyle}>양념</div>
      <div style={itemStyle}>간장</div>
      <div style={itemStyle}>파닭</div>
    </>
  );
}

// TO-BE
// App.jsx
import showChickenPrice from "./ShowChickenPrice";

function App() {
  const chickenTypes = [
    {id: 1, price: 15000, name: "후라이드"},
    {id: 2, price: 16000, name: "양념"},
    {id: 3, price: 17000, name: "간장"},
    {id: 4, price: 18000, name: "파닭"},
  ];
  return (
    <>
      {chickenTypes.map((type) => {
        return (
          <ShowChickenPrice type={chickenTypes} key={chickenTypes.id} />
        );
      })}
    </>
  );
}

export default App;

// ShowChickenPrice.jsx
export default function ShowChickenPrice({id, price, name}) {
  return (
    <div>종류 : {name}, 금액 : {price}</div>
  )
}