데이터받아올 때 특정 단어 색 변경하기

 

문제점

 

데이터를 받아와서 메시지를 출력하는데 특정 단어의 색만 변경을 해야했다.

한줄로 표현을 하면 아래와 같이 표현이 가능하다.

<div>무엇을 할지<span style="color: blue;">명확</span>해야 하고</div>

 

하지만 객체로 데이터를 받아오는 경우 특정 단어의 색을 변경해야하는 방법을 몰랐다.

		{
			id: "time",
			message: [
				`이제 본격적으로 습관을 구체화 시켜볼까요?`,
				`습관 약속은 시간, 장소, 행동으로 구분돼요.`,

				`그리고 그 약속은 \n1. 무엇을 할지 명확해야 하고\n2. 하고 싶도록 매력적이며\n3. 쉽게 할 수 있어야 하고\n4. 하고 난 뒤 만족스러워야 합니다.`,
				`최대한 4가지 원칙에 맞게끔 습관을 만들어 볼까요?`,
				`먼저 시간을 정해 볼게요!`,
				`다른 일에 방해 받지 않는 시간 혹은 매일 지키기에 수월한 시간으로 설정해 주세요.`,
			],
			replyBtnMessage: ["시간 선택"],
			reply: `${userData.time}`,
		},

 

해결법

특정 메시지를 하나씩 가져와서 replace를 이용해서 특정 단어(가나)가 있으면 span태그 엘리먼트로 만들어버렸다.

return message.replace(
        /(가나)/g,
        (match) => `<span style="color: blue;">${match}</span>`
      );

 

이렇게만 한다고 적용되는건 아니고 dangerouslySetInnerHTML를 사용해야한다.

왜냐하면 React에서 HTML 문자열을 직접 DOM에 삽입하려면, 문자열이 React 요소로 자동 변환되지 않기 때문에 dangerouslySetInnerHTML를 사용해야 한다. 하지만 이 방법은 XSS 공격에 취약할 수 있으므로, 사용할 때는 주의해야한다고한다.

 

<p
	dangerouslySetInnerHTML={{
	__html: paintingMessage(item.message, item.id),
	}}
></p>