<S.Title>{item.headertitle}</S.Title>
<S.Wrap>
RenderGage(index)
</S.Wrap>
const RenderGage = (a: number) => {
const result = [1, 2, 3, 4, 5]
return result.map((index: number) => {
return (
<S.Wrap key={'List-' + Math.random()}>
<S.Icon
src={ic_pin}
alt={title + '레벨은' + List[a]?.level + '입니다'}
/>
</S.Wrap>
)
})
}
웹 접근성 문제로 인해 스크린 리더기에 alt값을 전달해줘야해서
characterItemList를 map을 돌린
<S.Title>의 {item.headerTitle}을 RenderGage함수에
전달해주고 싶었다.
<S.Title>{item.headertitle}</S.Title>
<S.Wrap>
RenderGage(index, item.headertitle)
</S.Wrap>
const RenderGage = (a: number, title: string) => {
const result = [1, 2, 3, 4, 5]
return result.map((index: number) => {
return (
<S.Wrap key={'List-' + Math.random()}>
<S.Icon
src={ic_pin}
alt={title + '레벨은' + List[a]?.level + '입니다'}
/>
</S.Wrap>
)
})
}
전달해줄 위치에 item.headerTitle을 직접 넣고
전달해준 item.headerTitle을 title이라 지정하고 type을 string으로 주어 사용하였다.