React - Redux (fan page)-3

배열안의 5개의 리스트에서 하나를 클릭하면 클릭한 하나의 메뉴가 색이 변하면서 List가 필터링되는 기능

//MemberList.jsx
const MemberList = ({ handleSelectedMember }) => {
  const [selectedMember, setSelectedMember] = useState("");

  const handleMemberClick = (memberName) => {   -1
    setSelectedMember(memberName);
    handleSelectedMember(memberName);
  };

  return (
    <div>
      <ListUl>
        {members.map((member) => (
          <ListLi
            key={member}
            onClick={() => handleMemberClick(member)}
            className={selectedMember === member ? "selected" : ""}  -2
          >
            {member || "All"}
          </ListLi>
        ))}
      </ListUl>
    </div>
  );
};

• 1: handleMember함수가 실행되면 배열에 저장된(member)에 따라서 setUseState에 값을 넣고 매개변수로 받는 handleSelectedMember에도 넣어준다
• 2: className은 배열안에 있는 멤버이름과 클릭되서 실행된 selectdMember가 같으면 selected값을 가져오고 아니면 빈값을 가져온다

//Home.jsx
 const [selectMember, setSelectMember] = useState("");
  const handleSelectedMember = (memberName) => {
    setSelectMember(memberName);
  };

<SendList selectMember={selectMember} letterList={letterList} />

위에 memberList에서 매개변수로 handleSelectedMember(선택된 멤버)를 보낸다면 가져온 값을 selectMember라는 useState에 담아서 리스트로 보낸다

//SendList.jsx
const filteredList = selectMember		------ 1번
    ? letterList.filter((item) => item.selectBox === selectMember)
    : letterList;

  const handleDetail = (list) => {              ------ 2번
    navigate(`/detail/${list.id}`, { state: list });
  };
  return (
    <>
      <CardBox>
        {filteredList.length > 0 ? (  		------ 3번
          filteredList.map((list) => {
            return (
              <Card onClick={() => handleDetail(list)} key={list.id}>
                <Nickname>{`닉네임 : ${list.nickname}`}</Nickname>
                <CardContext>{`내용 : ${list.context}`}</CardContext>
                <CardDate>
                  {`등록시간 : ${new Date(list.createdAt).toLocaleDateString(  4번
                    "ko",
                    {
                      year: "2-digit",
                      month: "2-digit",
                      day: "2-digit",
                      hour: "2-digit",
                      minute: "2-digit",
                    }
                  )}`}
                </CardDate>
                <SelectBox>{`수신인: ${list.selectBox}`}</SelectBox>
              </Card>
            );
          })
        ) : (
          <span>등록된 팬 레터가 없습니다. 등록해주세요</span>
        )}
      </CardBox>
    </>
  );
};
export default SendList;

• 1번 : Home.jsx에서 가져온 selectMember를 사용을한다
  filterList 와 selectMember가 같으면 letterList에 필터링을걸어서 item.selectBox와 selectMember 같은을 렌더링하고 같지 않으면 본래의 letterList를 렌더링한다.
• 2번: useNavigate를 사용하여 useRouter에 저장해놓은 /detail/:id로 이동하고, 해당 페이지로 {state:list}를 props로 보낸다.
• 3번: filterList에 저장된 데이터가 존재하지 않는다면 팬레터가 없다고 띄워줌