<div id="root"></div>

body {
  padding: 20px;
}

import React from "https://esm.sh/react@18.2.0";
import ReactDOM from "https://esm.sh/react-dom@18.2.0";

function List() {
    const [state, setState] = React.useState(false);
    const items = [
        { id: 1, label: "카테고리A" },
        { id: 2, label: "카테고리B" },
        { id: 3, label: "카테고리C" },
        { id: 4, label: "카테고리D" },
    ];

    const data = state ? items.reverse() : items;
    return (
        <div>
            <p>* 체크 박스를 클릭하고</p>
            <p>* 순서를 변경해서 어떻게 동작하는지 확인해 보세요. </p>
            <button onClick={() => setState(!state)} style={{ marginBottom: "10px" }}>
                순서 변경하기
            </button>
            <div style={{ display: "flex", gap: '30px' }}>
                <div>
                    <p style={{ fontWeight: 900, textDecoration: "underline" }}>
                        인덱스를 key로 사용할 경우
                    </p>
                    {data.map((item, i) => (
                        <Item key={i} item={item} />
                    ))}
                </div>
                <div>
                    <p style={{ fontWeight: 900, textDecoration: "underline" }}>
                        고유값을 key로 사용할 경우
                    </p>
                    {data.map((item) => (
                        <Item key={item.id} item={item} />
                    ))}
                </div>
            </div>
        </div>
    );
}

function Item({ item }) {
    return (
        <div>
            <input type="checkbox" onChange={() => {}} />
            {item.label}
        </div>
    );
}

function App() {
    return (
        <div>
            <List />
        </div>
    );
}

ReactDOM.render(<App />, document.getElementById("root"));