react map값 -> 함수 전달

육희영·2023년 2월 15일

회고록

목록 보기
2/24
            <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으로 주어 사용하였다.

0개의 댓글