생각/TIL,WIL

[WIL]2022.11.14~2022.11.20

kyunghoonk00k 2022. 11. 20. 19:56
반응형
1. 배열안에 key를 map 하는 방법
content와 title의 내용이 반복되는 것을 동적으로 만들어주기 
const categoryArray = [
    '인문',
    '경영 경제',
    '자기계발',
    '예술',
    '자연과학',
    '사회정치',
    'IT 모바일',
    '소설',
    '에세이 시',
  ];

 

 const categoryTap = [
    {
      id: 0,
      title: '인문',
      content: data
        ?.filter((club: clubs) => club.category === '인문')
        .map((club: clubs) => {
          /** category에 값이 있을때 map 돌리고 없으면 없다고 출력 */
          return club.category === '인문' ? (
            <div key={club.id}>
              <h2>{club.clubName}</h2>
              <p>{club.summary}</p>
              <img src={club.thumbnail} alt="" />
            </div>
          ) : (
            <div>모임이 없습니다</div>
          );
        }),
    },
    {
      id: 1,
      title: '경영 경제',
      content: data
        ?.filter((club: clubs) => club.category === '경영 경제')
        .map((club: clubs) => {
          return club.category === '경영 경제' ? (
            <div key={club.id}>
              <h2>{club.clubName}</h2>
              <p>{club.summary}</p>
              <img src={club.thumbnail} alt="" />
            </div>
          ) : (
            <div>모임이 없습니다</div>
          );
        }),
    },
    {
      id: 2,
      title: '자기계발',
      content: data
        ?.filter((club: clubs) => club.category === '자기계발')
        .map((club: clubs) => {
          return (
            <div key={club.id}>
              <h2>{club.clubName}</h2>
              <p>{club.summary}</p>
              <img src={club.thumbnail} alt="" />
            </div>
          );
        }),
    },
    {
      id: 3,
      title: '예술',
      content: data
        ?.filter((club: clubs) => club.category === '예술')
        .map((club: clubs) => {
          return (
            <div key={club.id}>
              <h2>{club.clubName}</h2>
              <p>{club.summary}</p>
              <img src={club.thumbnail} alt="" />
            </div>
          );
        }),
    },
    {
      id: 4,
      title: '자연과학',
      content: data
        ?.filter((club: clubs) => club.category === '자연과학')
        .map((club: clubs) => {
          return (
            <div key={club.id}>
              <h2>{club.clubName}</h2>
              <p>{club.summary}</p>
              <img src={club.thumbnail} alt="" />
            </div>
          );
        }),
    },
    {
      id: 5,
      title: '사회정치',
      content: data
        ?.filter((club: clubs) => club.category === '사회정치')
        .map((club: clubs) => {
          return (
            <div key={club.id}>
              <h2>{club.clubName}</h2>
              <p>{club.summary}</p>
              <img src={club.thumbnail} alt="" />
            </div>
          );
        }),
    },
    {
      id: 6,
      title: 'IT 모바일',
      content: data
        ?.filter((club: clubs) => club.category === 'IT 모바일')
        .map((club: clubs) => {
          return (
            <div key={club.id}>
              <h2>{club.clubName}</h2>
              <p>{club.summary}</p>
              <img src={club.thumbnail} alt="" />
            </div>
          );
        }),
    },
    {
      id: 7,
      title: '소설',
      content: data
        ?.filter((club: clubs) => club.category === '소설')
        .map((club: clubs) => {
          return (
            <div key={club.id}>
              <h2>{club.clubName}</h2>
              <p>{club.summary}</p>
              <img src={club.thumbnail} alt="" />
            </div>
          );
        }),
    },
    {
      id: 8,
      title: '에세이 시',
      content: data
        ?.filter((club: clubs) => club.category === '에세이 시')
        .map((club: clubs) => {
          return (
            <div key={club.id}>
              <h2>{club.clubName}</h2>
              <p>{club.summary}</p>
              <img src={club.thumbnail} alt="" />
            </div>
          );
        }),
    },
  ];

 

2. 클럽데이터가 있을때 map돌리고 없을땐 데이터가 없다고 출력해주는 조건 달아주기 

  content: data?.filter((club: clubs) => club.category === '인문')

        .map((club: clubs) => {
          /** category에 값이 있을때 map 돌리고 없으면 없다고 출력 */
          return club.category === '인문' ? (
            <div key={club.id}>
              <h2>{club.clubName}</h2>
              <p>{club.summary}</p>
              <img src={club.thumbnail} alt="" />
            </div>
          ) : (
            <div>모임이 없습니다</div>
          );
        }),
    },

3. 카테고리 버튼을 클릭했을때 해당 탭이 오픈되게 하기 

   <LinkSt to={'/club_list'}>인문</LinkSt>
      <LinkSt to={'/club_list'}>경영/경제</LinkSt>
      <LinkSt to={'/club_list'}>자기계발</LinkSt>
      <LinkSt to={'/club_list'}>예술</LinkSt>
      <LinkSt to={'/club_list'}>자연과학</LinkSt>
      <LinkSt to={'/club_list'}>사회정치</LinkSt>
      <LinkSt to={'/club_list'}>모바일</LinkSt>
      <LinkSt to={'/club_list'}>소설</LinkSt>
      <LinkSt to={'/club_list'}>에세이/시</LinkSt>
 
-------------------------------------------------------------------------------------------------

1 : 해결 방법


  const categoryArray = [
    '인문',
    '경영 경제',
    '자기계발',
    '예술',
    '자연과학',
    '사회정치',
    'IT 모바일',
    // '소설',
    // '에세이 시',
  ];
const categoryTap = categoryArray.map((category, index) => {
    const categoryFilter = data?.filter(
      (club: Clubs) => club.category === category,
    );
    if (status === 'success') {
      return {
        id: index,
        title: category,
        content:
          categoryFilter.length > 0 ? (
            categoryFilter.map((club: Clubs) => {
              return (
                <Link to={`/club_detail/${club.clubId}`} key={club.clubId}>
                  <div>
                    <h2>{club.clubName}</h2>
                    <p>{club.summary}</p>
                    <img src={club.thumbnail} alt={club.summary} />
                  </div>
                </Link>
              );
            })
          ) : (
            <div>모임이 없습니다</div>
          ),
      };
    }
    return {
      id: index,
      title: category,
    };
  });

2: 해결 방법

length 길이체크로 데이터 유무 확인

  {categoryTap.length > 0 &&
                categoryTap.map(item => (
                  <li
                    key={item.id}
                    onClick={() => setIndex(item.id)}
                    className={index === item.id ? 'on' : undefined}>
                    {item.title}
                  </li>
                ))}

3 : 해결 방법

state를 내려주어

 <CategorySection>
      <LinkSt to={'/club_list'} state={0}>
        인문
      </LinkSt>
      <LinkSt to={'/club_list'} state={1}>
        경영/경제
      </LinkSt>
      <LinkSt to={'/club_list'} state={2}>
        자기계발
      </LinkSt>
      <LinkSt to={'/club_list'} state={3}>
        예술
      </LinkSt>
      <LinkSt to={'/club_list'} state={4}>
        자연과학
      </LinkSt>
      <LinkSt to={'/club_list'} state={5}>
        사회정치
      </LinkSt>
      <LinkSt to={'/club_list'} state={6}>
        IT 모바일
      </LinkSt>
      {/* <LinkSt to={'/club_list'} state={7}>
        소설
      </LinkSt>
      <LinkSt to={'/club_list'} state={8}>
        에세이/시
      </LinkSt> */}
    </CategorySection>
 
인덱스 값에 state를 넣어주어 바뀌게 함
  useEffect(() => {
    if (state === null) setIndex(index);
    else {
      setIndex(state);
    }
  }, []);
반응형
저작자표시

'생각 > TIL,WIL' 카테고리의 다른 글

[WIL]2022.11.27 ~ 12.04  (0) 2022.12.05
[WIL]2022.11.20~26  (0) 2022.11.27
[TIL]2022.11.17  (0) 2022.11.18
[WIL]2022.11.06~2022.11.13  (0) 2022.11.13
[TIL]2022.11.09  (0) 2022.11.10

'생각/TIL,WIL'의 다른글

  • 현재글[WIL]2022.11.14~2022.11.20

관련글

티스토리툴바