반응형
실전 프로젝트를 진행하며 기술적으로 막혔던 부분
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, 2, 3 해결 방안 생각중,,,
반응형
'생각 > TIL,WIL' 카테고리의 다른 글
| [WIL]2022.11.14~2022.11.20 (0) | 2022.11.20 |
|---|---|
| [TIL]2022.11.17 (0) | 2022.11.18 |
| [TIL]2022.11.09 (0) | 2022.11.10 |
| [WIL]2022.10.29 - 11.05 (0) | 2022.11.06 |
| [TIL]2022.11.05 (0) | 2022.11.06 |