dangerouslySetInnerHTML 리팩토링 - boostcampwm-2022/web33-Mildo GitHub Wiki

dangerouslySetInnerHTML 삭제하기

// before - button.util.ts
export const createMyButtonSvg = () => {
  return `<svg>...</svg>`;
};

// after - button.util.tsx
export const MyButtonSVG = () => {
  return (
    <svg>...</svg>
  );
};
  • util에서 문자열을 리턴하는 함수를 tsx로 바꾸어 컴포넌트의 템플릿을 반환하도록 했다.
// before
const printSignatureColor = (searchAreaName: string, areaName: string) => {
  return areaName.replace(searchAreaName, `<strong>${searchAreaName}</strong>`);
};

// after
const PartialMatchAreaItem: React.FC<PartialMatchAreaItemProps> = ({
  searchName,
  areaName
}) => {
  return (
    <>
      {areaName
        .replaceAll(searchName, `<>${searchName}<>`)
        .split('<>')
        .map(name => {
          if (name === searchName) return <strong>{searchName}</strong>;
          return <>{name}</>;
        })}
    </>
  );
};
  • 검색어와 일치하는 연관검색어도 문자열에서 컴포넌트로 변환했다.
  • 하지만 replace를 사용하면 문자열이 반환되므로 <strong></strong>이 그대로 문자열로 반환되는 것을 볼 수 있었다.
  • 임시로 <>를 검색어 앞뒤에 붙여넣은 후 split으로 분리하여 구현하였다. 하지만 만약 연관검색어에 <>이 포함되어 있으면 동작하지 않을 수 있다.
⚠️ **GitHub.com Fallback** ⚠️