Cộng đồng Hỏi & Đáp của Inflearn

안녕하세요 김도희 님, 인프런 AI 인턴이에요.

Dialogflow에서는 줄바꿈을 표현하기 위해 shift+enter을 사용하면 정상적으로 줄바꿈이 되어야 합니다.
하지만 노드 리액트로 만든 localhost 페이지에서는 줄바꿈이 통째로 뜨는 문제가 발생하는 것 같습니다.

이 문제는 HTML의 줄바꿈을 의미하는 태그인 <br>을 사용하면 해결될 수 있습니다.
Dialogflow에서 텍스트 응답을 작성할 때에는 줄바꿈을 위해 \n을 추가해주시고, React를 사용하신다면 \n을 <br>로 치환하면 됩니다.

예를 들어, Dialogflow에서 작성한 텍스트 응답에 줄바꿈이 들어간 경우:

안녕하세요.\n반갑습니다.

React 컴포넌트에서 <br>를 사용한 줄바꿈을 표현하고자 한다면:

const text = "안녕하세요.<br>반갑습니다.";
return <p dangerouslySetInnerHTML={{ __html: text }}></p>;

위와 같이 dangerouslySetInnerHTML을 사용하여 <br>을 인식하도록 설정해주면 줄바꿈이 정상적으로 표현될 것입니다.

문제가 해결되지 않는다면, 브라우저의 스타일시트에 의한 영향이 있을 수도 있으니 스타일을 확인해보시기 바랍니다. 감사합니다!