외곈 World 👽🌏

리액트 프로젝트에서 CSS 방식, dangerouslySetInnerHTML, 별도의 컴포넌트 방식 등으로 문자열 데이터의 줄바꿈 처리를 구현 할 수 있다.

최종적으로 권장하는 방식은 별도의 컴포넌트 방식이다. 이 방법은 다음과 같은 이유로 가장 적합하다:

• 재사용성: 같은 줄바꿈 로직을 여러 컴포넌트에서 재사용할 수 있다.
• 유지보수: 메시지 포매팅 로직을 한 곳에서 관리할 수 있어, 변경사항이 있을 때 모든 컴포넌트에 일관되게 적용하기 쉽다.
• 확장성: 추후에 메시지 처리 로직에 추가적인 변환 로직(예: 특정 단어에 스타일 적용)이 필요할 때 이 컴포넌트를 확장하기 쉽다.

이 방법은 보안적으로 안전하며, dangerouslySetInnerHTML의 보안 취약점 없이 유사한 유연성을 제공한다. CSS 방식은 매우 단순하지만, 메시지 처리에 있어 다른 HTML 태그 적용이 불가능하다는 단점이 있어 복잡한 요구사항에는 적합하지 않다.

1. CSS 사용 - 가장 간단

가장 간단하고 직관적인 방법이다. CSS의 white-space: pre-line; 속성을 사용해 문자열 내의 줄바꿈(\n)을 HTML에서 인식할 수 있도록 한다.

interface Props {
  message: string;
}

export default function Intro({ message }: Props) {
  return (
    <div style={{ whiteSpace: 'pre-line' }}>
      {message}
    </div>
  );
}

2. dangerouslySetInnerHTML 방식 - 권장되지 않음

dangerouslySetInnerHTML를 사용하여 HTML로 메시지를 직접 렌더링하는 방법이다. XSS 공격에 취약할 수 있으므로 사용할 때 주의가 필요하다.

interface Props {
  message: string;
}

export default function Intro({ message }: Props) {
  const formattedMessage = { __html: message.replace(/\n/g, '<br>') };
  return (
    <div dangerouslySetInnerHTML={formattedMessage} />
  );
}

3. 별도의 컴포넌트 방식 ⭐권장

메시지 내의 \n을 <br /> 태그로 변환하여 렌더링하는 별도의 컴포넌트를 사용하는 방법이다. 가장 유연하고 재사용성이 높은 방법이다.

interface Props {
  message: string;
}

export default function Intro({ message }: Props) {
  const formattedMessage = message.split('\n').map((part, index, array) => (
    <React.Fragment key={index}>
      {part}{index !== array.length - 1 && <br />}
    </React.Fragment>
  ));

  return (
    <div>
      {formattedMessage}
    </div>
  );
}