[Next.js] Trans 컴포넌트의 shouldUnescape 개념과 활용 방법

개요

웹 개발에서는 UI에서 다양한 텍스트 데이터를 안전하고 올바르게 표시하는 것이 중요합니다. 특히 다국어 지원이나 동적 콘텐츠 렌더링을 위해 텍스트를 처리할 때, 이스케이프된 특수 문자를 처리해야 하는 경우가 많습니다. 이 과정에서 유용하게 사용되는 것이 Trans 컴포넌트와 그 속성 중 하나인 shouldUnescape입니다.

Trans 컴포넌트란?

2024.08.28 - [React] - [Next.js] Trans 컴포넌트의 shouldUnescape 개념과 활용 방법

shouldUnescape 속성이란?

shouldUnescape는 주로 텍스트 데이터를 처리할 때 해당 데이터가 이스케이프된 상태에서 언이스케이프(Unescape)하여 원래 상태로 변환해야 하는지 여부를 결정하는 속성이나 함수입니다. 이 속성은 특히 HTML, XML, 또는 기타 마크업 언어를 다룰 때 중요하게 사용됩니다.

이스케이프(Escape)와 언이스케이프(Unescape)란?

이스케이프(Escape)

특정 문자가 HTML이나 XML에서 특수한 의미를 가질 때, 이 문자를 안전하게 표현하기 위해 다른 문자 시퀀스로 변환하는 과정을 말합니다.
예를 들어, < 문자는 HTML에서 태그의 시작을 의미하므로, <로 이스케이프해야 안전합니다.

언이스케이프(Unescape)

이스케이프된 문자 시퀀스를 다시 원래의 특수 문자로 복원하는 과정을 의미합니다.
예를 들어, <를 <로 다시 변환하는 작업이 이에 해당합니다.

Trans 컴포넌트의 shouldUnescape 속성 역할

Trans 컴포넌트는 주로 다국어 텍스트를 처리할 때 사용되지만, 동적 콘텐츠나 HTML을 포함한 텍스트를 렌더링할 때도 사용됩니다.
shouldUnescape 속성은 이 컴포넌트가 렌더링할 텍스트가 이스케이프된 상태인지, 또는 이 상태를 원래대로 복구해야 하는지를 결정하는 역할을 합니다.

반응형

사용 예시

HTML 엔터티를 포함한 텍스트 렌더링

import Trans from 'some-library';
function ExampleComponent() {
    const text = "Hello, <strong>World!</strong>";

    return (
        <Trans shouldUnescape={true}>
            {text}
        </Trans>
    );
}

위 예제에서 text는 이스케이프된 HTML 엔터티를 포함하고 있습니다.
shouldUnescape가 true로 설정되어 있으므로, 렌더링 결과는 다음과 같이 출력됩니다

Hello, <strong>World!</strong>

이스케이프된 텍스트 그대로 렌더링

import Trans from 'some-library';
function ExampleComponent() {
    const text = "Hello, <strong>World!</strong>";
    return (
        <Trans shouldUnescape={false}>
            {text}
        </Trans>
    );
}

이번 예제에서는 shouldUnescape를 false로 설정했습니다.
따라서 이스케이프된 텍스트는 그대로 출력됩니다

Hello, <strong>World!</strong>

결론

shouldUnescape는 이스케이프된 텍스트를 원래의 상태로 복원해야 할 때 유용한 속성입니다. 이 속성을 적절하게 활용하면, 사용자에게 안전하면서도 올바르게 형식화된 데이터를 제공할 수 있습니다. HTML, XML 등의 마크업 언어를 다루는 웹 애플리케이션 개발자에게는 꼭 알아두어야 할 개념입니다.