React props로 전달한 문자열 개행 처리하는 방법

JSX 문법으로 개행을 처리하는 방법을 몰라 꽤나 고생을 하여 기록합니다.

우선 props로 개행 문자인 '\n' 가 아닌 <br /> 태그를 전달해야합니다.

이후에는 dangerouslySetInnerHtml 와 함께 정규문법 RegExp를 사용하여 <br /> 태그를 '\n'로 치환해주면 됩니다.

 

예시는 아래와 같습니다.

Main.js

	import React, { useState } from 'react';
	import Example from './Example';
	function Main() {
	return (
	<Example message="안녕하세요<br/>잘 부탁드립니다." />
	);
	}
	export default Main;

view raw .js hosted with ❤ by GitHub

Example.js

	import React from 'react';
	function Example(props) {
	<h1>
	<div dangerouslySetInnerHtml={{__html: props.message.replace(new RegExp('\n', 'g'), '<br/>')}} />
	</h1>
	}
	export default Example;

view raw .js hosted with ❤ by GitHub

[react 버전] 16.13.1