React Emoji Not Showing (Window)

 

✔️ 필요성

react에서 Emoji를 Text처럼 사용했는데 Mac Safari에서는 의도했던 이모지가 보이는데 Window Chrome에서는 의도했던 이모지가 보이지 않는 현상이 나타났다

 

 

 

 

✔️ 문제 확인

기존 코드는 아래와 같이 사용했었다.

import React from "react";
import styled from "@emotion/styled";

const Container = styled.div`
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 80px 0px 100px 0px;
`
const Emoji = styled.p`
    margin-bottom: 10px;
`

interface Props {
    className?: string
}
const Example = ({className}: Props) => {
    return (
        <Container className={className}>
            <Emoji type="copy" scale="1">🥲</Emoji>
        </Container>
    )
}

 

 

 

✔️ 문제 해결

아래 사이트에서 사용하고 싶은 이모지의 유니코드(unicode)를 가져온다.

 

https://www.w3schools.com/charsets/ref_emoji_smileys.asp

HTML Smiley Emoji

const Emoji = styled.span`
    margin-bottom: 10px;
    font-size: 40px;
`

interface Props {
    className?: string
}
const Example = ({className}: Props) => {
    return (
        <Container className={className}>
            <Emoji>&#128549;</Emoji>
        </Container>
    )
}

 

위에서 세미콜론(;)은 꼭 있어야 한다.