1. 기존 코드
detail 변수 안에 request 해서 받은 데이터를 담아서 그중 content라는 key 값을 사용하고자 함
string으로 떨어지는 해당 값은 안에 '\n' 또는 '\r'을 포함하고 있어서, 그 문자열을 활용해야 했는데,
처음에는 아래와 같은 방법을 적용했다.
{detail.content && detail.content.split("\n").map((line, index) => {
return (
<p key={index}>
{line}
<br/>
</p>
)
})}
2. 요구 사항
위의 코드는 데이터로 떨어진 string 을 화면에 보여주되, '\n' 일 때 문자열을 잘라서 줄바꿈을 (어찌보면) 강제로 적용시킨 코드였다.
따라서, 추후 <a href=""></a> 와 같은 HTML 형식의 string 값을 받았을 때 tag 별 인식은 불가능했다.
link url 도 데이터로 따로 받고 있어서 해당 링크는 버튼으로 처리했지만 content 안에 들어있는 a 태그도 인식됐으면 좋겠다는 피드백을 수렴하기 위해 코드 수정을 했다.
참고 자료
a. innerHTML 를 react 에서는 dangerouslySetInnerHTML 로 사용한다는 내용
https://velog.io/@nemo/string-to-jsx
[React] 문자열을 HTML(JSX)로 출력하기 (innerHTML처럼)
API로 데이터를 가져와 매핑하는데 화면에 HTML 태그가 String으로 출력되었다.네이버 API의 경우 패시지에서 검색어와 일치하는 부분은 <b></b> 태그로 감싸져 있다고 한다. 이 태그를 String이 아닌 JSX
velog.io
b. dangerouslySetInnerHTML 사용 시 style 적용하는 방법
(a 태그에 걸린 텍스트만 하늘색 + 밑줄 스타일이 필요했기 때문)
how to pass style using dangerouslySetInnerHTML in React
I'm injecting html in my react component using dangerouslySetInnerHTML in a format like this : <div className="mt-2 col variant-attr-cell p-0" dangerouslySetInnerHTML = { { ...
stackoverflow.com
// style
const textStyle = (body: string) => `
<div>
<style>
a {
color: cornflowerblue;
text-decoration: underline;
}
</style>
${body}
<div>
`;
// return text
{detail.content && <p dangerouslySetInnerHTML={{__html: textStyle(detail.content)}}></p>}
컴포넌트 return 이전에 const 로 스타일 정의 후 해당 스타일의 body 매개변수를 보여주고자 하는 text(여기서는 detail.content)을
담아서 출력하면, 끗 - ! ✨
댓글