마크업형식의 데이터 받아와서 보여주기

 

문제점 

 

 

 

좌측의 사진처럼 메시지가 string형식으로 올 때도 있지만 우측의 사진처럼 마크업형식으로 보내야할 필요가 있었다.

2024.03.12 - [개발/React] - 데이터받아올 때 특정 단어 색 변경하기

이전의 블로깅한 것과 비슷하게 마크업형식으로 데이터를 보내고 dangerouslySetInnerHtml을 사용해서 표현하고자 하였다.

 

해결책

message를 string형식이지만 마크업형식으로 데이터를 전달했다.

dangerouslySetInnerHTML를 사용하면 HTML으로 작동되기 때문에 HTML형식에 맞는 style을 주입하였다.

 {
    id: 0,
    message:
      '<div style="width: 100px; height: 100px; background-color: yellow;"></div>',
  },

 

dangerouslySetInnerHTML 출력

<p
	dangerouslySetInnerHTML={{
	__html: item.message,
	}}
></p>

 

 

PS

대표 사진에 있는 것처럼 하기 위해서는 상당히 긴 데이터를 보내야 했다.

{
			id: "organize",
			message: [`지금까지 나눈 이야기를 정리해 보여드릴게요.`],
			replyBtnMessage: [
				"이 내용이 맞아",
				"정체성 변경",
				"시간 변경",
				"장소 변경",
				"습관 변경",
				"행동 변경",
				"1차 알림 변경",
				"2차 알림 변경",
			],
			reply: `
			<div>
			<div class="allUserData">
				<h2 class="bold">정체성</h2>
				<div>
					<ul>
						<li>정체성</li>
					</ul>
					<ul class="bold">
						<li>${userData.habit}</li>
					</ul>
				</div>
			</div>
			<div class="allUserData">
				<h2 class="bold">습관 내용</h2>
				<div>
					<ul>
						<li>시간</li>
						<li>장소</li>
						<li>행동</li>
					</ul>
					<ul class="bold">
						<li>${userData.time}</li>
						<li>${userData.location}</li>
						<li>${userData.behavior}</li>
					</ul>
				</div>
			</div>
			<div class="allUserData">
				<h2 class="bold">알림</h2>
				<div>
					<ul>
						<li>1차 알림</li>
						<li>2차 알림</li>
					</ul>
					<ul class="bold">
						<li>${userData.alert1}</li>
						<li>${userData.alert2}</li>
					</ul>
				</div>
			</div>
		`,
		},