🚨 ReactMarkdown + <img /> 경고 원인과 해결

🤔 원인

react-markdown을 사용하면서 이미지를 렌더링 하는 경우에 특별한 처리를 해주지 않으면 <p> 내부에 <img />를 사용하게 됩니다.

직접 실험해 본 결과로는 <p>태그 내부에는 <a>와 <span>같은 태그 외에 다른 태그들이 들어가면 경고를 띄워줍니다.

따라서 <img> react markdown cannot appear as a descendant of <p>. 같은 경고가 발생하게 됩니다.

• 위의 경우에는 해당되지 않지만 알아두면 좋을 것 같은 정보라서 추가했습니다. ( 참고 )
  기본 display가 inline인 경우에는 내부에 다른 요소를 포함할 수 없습니다.
  기본 display가 block인 요소만 내부에 다른 요소를 포함할 수 있습니다.

😮 해결 방법

해결 방법 참고 링크

import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";

// jsx
<ReactMarkdown
  className="py-4 px-8 prose dark:prose-invert whitespace-normal max-w-full"
  remarkPlugins={[remarkGfm]}
  components={{
    p: ({ node, ...props }) => {
      // <img />를 렌더링 하는 경우에 <p>내부에서 렌더링 되지 않도록 하기 위함
      if (typeof props.children[0] === "object") {
        const element: any = props.children[0];
        return element.type.name === "img" ? (
          { ...element }
        ) : (
          <p {...props} />
        );
      }
      return <p {...props} className="whitespace-pre-line" />;
    },
	// 나머지 부분 생략...
  }}
>
  {markdown}
</ReactMarkdown>