1912 react에서 textarea의 value값 내의 br태그 인식하여 표현.md

Issue: React에서 textarea의 value 값 중 enter(/n)값을 인식하여 뷰가 나오도록 처리

상황:

React에서 textarea의 value 값 중 enter 값을 인식하여 뷰가 나오도록 처리하는 상황

생각해낸 방안:

• 정규표현식을 활용하여 "\n"을 <br> 태그로 replace
• dangerouslySetInnerHTMl 사용하여 처리
• "\n"을 split하여 react 내부에서 map을 활용하여 배열로 처리

방안: 정규표현식을 활용하여 "\n"을 <br> 태그로 replace (실패)

문자열.replace(/(?:\r\n|\r|\n)/g, '<br />');

이를 활용하려고 했지만 react 자체에서는 XSS방지를 위하여 문자열 내부 태그를 인식하지않고 문자열 그대로 렌더링한다.

    참조:
    http://naminsik.com/blog/3282

방안: dangerouslySetInnerHTMl 사용하여 처리 (성공)

사용할 수 있고 어떻게 보면 가장 직관적인 방법이지만 취약점을 굳이 만들 필요가 없고, 단순하게 br 태그만이 필요했기 때문에 다른 방법을 선택하게 됐다.

    참조:

방안: "\n"을 split하여 react 내부에서 map을 활용하여 배열로 처리 (성공)

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

벨로퍼트님 블로그를 참조했다.

    참조:
    https://velopert.com/1896