아래와 같은 코드를 작성하다가 오류를 내었다.
import React from 'react';
import styled from 'styled-components';
import sunflower from '../assets/sunflower.jpg'
function Todo() {
return (
<ToDoLayer>
<TextLayer>
<Title>Todo</Title>
<hr />
<P>The About page is the core description of your website. Here is where you let clients know what your website is about. You can edit all of this text and replace it with what you want to write. For example you can let them know how long you have been in business, what makes your company special, what are its core values and more.
Edit your About page from the Pages tab by clicking the edit button.</P>
</TextLayer>
<Img>
<img src={sunflower} alt='sunflower'/>
</Img>
</ToDoLayer>
);
}
export default Todo;
const ToDoLayer = styled.div``;
const TextLayer = styled.div``;
const Title = styled.h2``; // 적절한 헤딩 요소를 사용하고 스타일링
const P = styled.p``;
const Img = styled.img``;오류내용:
ERROR
img is a void element tag and must neither have children nor use dangerouslySetInnerHTML.
해결내용:
//태그를 감싸고 있는
를 없애니깐 해결되었다.//
Dangerously setting the inner HTML
이 코드 조각은 React에서 dangerouslySetInnerHTML 속성을 사용하여 HTML 문자열을 해당 엘리먼트에 삽입하는 방법을 보여줍니다. 코드는 다음과 같이 설명할 수 있습니다:
const markup = { html: '
some raw html
' };: HTML 문자열을 담고 있는 객체를 생성합니다. 이 객체는 html이라는 특별한 속성을 가지며, 해당 속성의 값으로는 실제 HTML 문자열이 들어갑니다.return
;: React에서 제공하는 dangerouslySetInnerHTML 속성을 사용하여, 이전에 생성한 HTML 문자열 객체를 컴포넌트에 전달합니다. 이렇게 하면 해당 div 엘리먼트의 내용이 주어진 HTML 문자열로 대체됩니다.
경고: 그러나 주석에서 언급한 대로, 이 방법은 "위험하다"는 표현을 사용하고 있습니다. dangerouslySetInnerHTML을 사용할 때는 주의가 필요합니다. 외부에서 제공되는 사용자 입력 또는 외부 소스에서 가져온 데이터를 랜더링하는 경우, XSS 공격에 취약할 수 있습니다. 사용자로부터 입력 받은 데이터를 직접적으로 dangerouslySetInnerHTML에 전달하는 것은 피해야 하며, 대신 안전한 방법으로 데이터를 처리해야 합니다.
연습일지