[dB's 리액트] 컴포넌트에 BR 태그 추가하는 방법

(참고내용) 리액트에서 모든 DOM 프로퍼티와 속성값은(이벤트 헨들러포함) 반드시 카멜표기법을 사요해야합니다. 예를들어, tabindex 는  tabIndex와 동일합니다. 예외가 있다면, aria-*, data-* 가 있습니다. 이번 포스팅에서 다룰 내용은 컴포넌트에 <br> 태그 사용법입니다. 정확히 말하면 html 문자열에 있는 newline(\n)을 <br> 태그로 전환하는 방법입니다. 기본적으로 리액트는 cross-site-scripting(XSS) 공격을 막기위해 렌더링 메소드 내부에 html의 문자열을 사용하면 렌더링이 되지 않습니다. 즉, 무조건 텍스트형태로 렌더링이 됩니다. 이러한 취약점을 알고도 사용을 원한다면 아래와 같은 dangerouslySetInnerHTML 방법이 있습니다.

function createMarkup() {
  return {__html: 'First · Second'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

하지만 더 좋은 방법이 있습니다. 바로 Mapping을 통하여 문자열을 배열로 만들어 출력하는 방법입니다. 첫 번째 코드는 기본적인 사용법입니다. 두 번째 코드는 함수 유틸리티로 만들어 리액트 작업시 어디에서도 사용할 수 있도록 제작되었습니다.

{
  data.split('\n').map( line => {
    return (<span>{line}<br/></span>)
  })
}

export function getNewlinesApplied(html) {
  if (!html) return null

  const lines = html.split('\n')

  if (lines.length === 0) {
    return html
  }

  return lines.map((line, index) => (
    React.createElement('span', {
      key: index,
    }, line, React.createElement('br'))
  ))
}

이제 미리 정의된 함수를 불러와서 쉽게 사용이 가능합니다. (참고내용) cross-site-scripting 공격은 게시판, 블로그, 회원가입 등에서 주로 나타나며, HTML 태그 입력이 가능한 곳에서 스크립트 공격을해서 사용자의 정보를 가져오는 것을 말합니다.