여러 리스트 중 리스트들이 개별로 기능하는 방법에 대해 정리했다.

고려할 사항

리스트 click 이벤트를 주어 handleShowDetail 함수를 통해 해당 리스트의 값을(여기서는 index) 받아researchDetailLiStates에 저장된 값 중 빋아 온 리스트에 대한 값을 반전 시켜 새로운 상태를 업데이트한다.

const [researchDetailLiStates, setResearchDetailLiStates] = useState({});
const handleShowDetail = (index) => {
    // setResearchDetailLiStates 함수를 사용하여 이전 상태를 가져오고, 해당 인덱스의 값을 반전시킨다.
    setResearchDetailLiStates((prev) => ({
      ...prev, // 이전 상태를 복사합니다.
      [index]: !prev[index], // 해당 인덱스의 값을 반전시켜 새로운 상태를 업데이트한다.
    }));
 };

클릭 이벤트를 통해 0번째 리스트 클릭 시 researchDetailLiStates 값은 {0: true, 1: false, 2: false} 로 변경된다. (0번에 대한 불리언 값을 반전시킨다.) {0: true, 1: false, 2: false} 이 상태를 활용해 client 화면에 true인 값만 화면에 보이게 한다.

 {researchDetailLiStates[index] && (
	   <div className="evidence_detailArea">
	    //...
	   </div>
 )}

전체 코드

"use client";
import { useState } from "react";

export default function Test() {
  const [detailLiStates, setDetailLiStates] = useState({});
  const handleShowDetail = (index) => {
    setDetailLiStates((prev) => ({
      ...prev,
      [index]: !prev[index],
    }));
  };

  return (
    <ul className="list w-[500px] mx-auto">
      {[1, 2, 3].map((list, index) => (
        <li key={index}>
          <div className="list_titleArea">
            <p className="list_link">제목 {index}</p>
            <p
              className={
                detailLiStates[index]
                  ? "list_detail_btn list_detail_btn_selected"
                  : "list_detail_btn"
              }
              onClick={() => handleShowDetail(index)}
            >
              세부정보 {index}
            </p>
          </div>
          {detailLiStates[index] && (
            <div className="list_detailArea">
              <div className="detail_conTxt">
                <p className="detail_title">상세내용</p>
              </div>
              <ul className="detail_conTable">
                <li>
                  <p>상세</p>
                  <p>상세1</p>
                </li>
              </ul>
            </div>
          )}
        </li>
      ))}
    </ul>
  );
}

결과

참고

https://chan-co.tistory.com/158