리액트 아코디언

작년에 리액트로 아코디언 한번 만들어봤는데, 퍼블로 작업만 했지 안 만든지 오래된 것 같아서 새로한번 만들어봤다. 어렵고 잘 모른다고 했을때 잘 알려준 회사 개발자분께 감사 ㅎ_ㅎ

css는 생략😝

App.js

import { useState } from "react";
import Content from "./Content";

function App() {
  const [dropdown, setDropdown] = useState({
    active: null,
    item: [
      {
        id: 0,
        title: "타이틀1",
        content: "내용1"
      },
      {
        id: 1,
        title: "타이틀2",
        content: "내용2"
      },
      {
        id: 2,
        title: "타이틀3",
        content: "내용3"
      },
      {
        id: 3,
        title: "타이틀4",
        content: "내용4"
      },
      {
        id: 4,
        title: "타이틀5",
        content: "내용5"
      }
    ]
  });

  const handleContentClick = (id) => {
    const _active = id === dropdown.active ? null : id;

    setDropdown({
      ...dropdown,
      active: _active
    });
  };

  return (
    <div className="wrap">
      <Content dropdown={dropdown} handleContentClick={handleContentClick} />
    </div>
  );
}

export default App;

Content.js

const Content = ({ dropdown, handleContentClick }) => {
  return (
    <ul className="list">
      {dropdown.item.map((it, idx) => {
        return (
          <li className="item" key={it.id}>
            <div className="title" onClick={() => handleContentClick(it.id)}>
              {it.title}
            </div>
            {it.id === dropdown.active ? (
              <div className="content">{it.content}</div>
            ) : null}
          </li>
        );
      })}
    </ul>
  );
};

export default Content;