JSON 데이터 띄어쓰기, 줄바꿈 해결법 - dangerouslySetInnerHTML

i18n 사용중 JSON으로 정리하는데 원래 줄바꿈이 되어있는 하나의 텍스트가 존재했엇다.
예를 들어

"나는 멍청이에용용용<br /> 우하하하하하하하하"

이런식으로 간단한 줄바꿈으로 2줄을 만들어 놓은 텍스트들을 i18n사용을 위해 json형식에 저장하다보니 줄바꿈을 어떤식으로 해야하나 고민에 빠졌다.

split

처음에 시도한 방법은 \n 을 줄바꿈 할 곳에 적어둔뒤 split('\n')으로 잘라준 뒤에 map으로 뿌려줄 생각이였다.

{t("key_name")
        .split('\n')
        .map((line: string, index: number) => (
          <span key={index}>
            {line}
            {index < t("description").split('\n').length - 1 && <br />}
          </span>
        ))}

이런식으로 작성할 수 있는데 만약 번역해야할 컴포넌트가 많고 저걸 모듈화 한다더라도 그 일이 더 커질거 같아서 답답해하고 있던중 dangerouslySetInnerHTML를 알게 되었다.

dangerouslySetInnerHTML

dangerouslySetInnerHTML은 React에서 사용하는 속성 중 하나로, HTML을 동적으로 렌더링할 때 사용됩니다. 이름에서도 알 수 있듯이, 이 속성을 사용하면 웹 페이지의 보안을 위협할 수 있는 HTML을 포함시킬 수 있기 때문에 "dangerous"하다고 표현한다. 따라서 이 속성을 사용할 때는 주의가 필요하다

사용법

dangerouslySetInnerHTML을 사용하는 방법은 다음과 같다
1. JSON 데이터나 다른 소스에서 HTML 문자열을 가져옵니다.
2. 해당 HTML 문자열을 React 컴포넌트의 JSX 요소에 삽입합니다.
3. dangerouslySetInnerHTML 속성을 사용하여 해당 HTML 문자열을 렌더링합니다.

  <div dangerouslySetInnerHTML={{ __html: htmlString }}></div>
  

이런 형식인데 htmlString 안에 나는 t("key값")을 넣어주니 줄바꿈이 아주 잘 되었다.