[React] 접근성 및 재사용성을 위한 Emoji

SangBooom·2022년 8월 17일
0
// 구현부
import React from 'react';

interface Emoji {
  label?: string;
  symbol: string;
}
/**
 * 접근성 및 재사용성을 위한 이모지 컴포넌트
 */
const Emoji = ({ label = '', symbol }: Emoji): JSX.Element => (
  <span role="img" aria-label={label} aria-hidden={label ? 'false' : 'true'}>
    {symbol}
  </span>
);
export default React.memo(Emoji);
// 사용부 
<>
  <Emoji symbol="👀" label="Eyes" /> 잠깐! 여기서 주목해주세요
</>

label과 symbol 참고 : https://unicode-table.com/kr/emoji/

profile
끊임없이 떨어지는 물방울이 바위를 뚫는다

0개의 댓글