HTML 태그 React에서 사용하기

DB에 등록되어있는 Markup 문서를 react에서 처리하는 법을 알아보았다.

1. markup이란? : 문서 내부의 특정 위치에 메타 데이터와 같이 문서의 형식 및 출력 방식과 추가적 정보를 넣을수 있다. 이런 일련의 문자들 혹은 기호를 마크업이라 한다.
   HTML문서도 하나의 마크업 문서이다.

2. 문서를 가져와서 react에 출력하는 방법 : https://reactjs.org/docs/dom-elements.html 를 참고하였다.

// react에서는 innerHTML의 대체품으로 dangerouslySetInnerHTML을 사용한다.
// 코드에서 HTML을 설정하는 것은 XSS 공격에 노출시키기 쉽기 때문에 위험하다. 그래서 dangerously가 붙음.
function createMarkup() {
  return {__html: 'First · Second'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

// 응용하여 만든 create markup method
 const createShortDescriptionMarkup = () => {
    let resultShortDescription = "";
// 등록된 제품의 브랜드와 이름으로 타이틀을 만들고 description을 이어서 하나로 만들어준다.
    data?.map((product) => {
      resultShortDescription += `<b>[${product.brand}] ${product.name}</b>
      ${product.description}
      </br>`;
    });
    return { __html: resultShortDescription };
  };

  const createDetailsMarkup = () => {
    let resultDetails = "";

    data.map((product) => {
      resultDetails += `<b>[${product.brand}] ${product.name}</b>
      </br>
      ${product.details}
      </br>`;
    });

    return { __html: resultDetails };
  };

white-space: pre-line; 를 추가해주면 완성 자세한건 생략하겠슴다.