[React] string 값을 html 로 렌더링 하여 불러오는 방법

React[리엑트]jieey110

리엑트에서 html 태그가 있는 글을 출력하면 아래와 같이 나옵니다. 리엑트에서는 XSS 공격을 사전에 방지하기 위해 HTML 태그 , JS 문법은 모두 escape 시키기 때문에 html 태그가 읽히지 않습니다.그러나 DB 나 다른 파일에서 HTML 문서 또는 내용을 불러와야 될때가 있습니다.이럴때 사용하는 함수가 dangerouslySetInnerHTML={?{__html:?}?} 함수입니다. 이 문법을 적용하고 기존에 있던 코드를 삭제하였습니다. 그리고 dangerouslySetInnerHTML={?{__html: this.state.des?}?} 로 변경하였습니다….

더 보기

[React] warning: invalid dom property `class`. did you mean `className`? 해결

React[리엑트]jieey110

리엑트를 처음 접하셨을 때 아래의 오류를 한번쯤은 보실껍니다. warning: invalid dom property `class`. did you mean `className`? 리엑트는 JSX의 문법을 사영하기 때문에 HTML 클래스를 사용하면 안됩니다. JSX 문법은 단어 앞부분마다 대문자로 표기(카엘 표기법)합니다. (예 : className , colSpan 등) 리엑트에서 보이는 “class ” 태그를 className 으로 변경해 주면 사진과 같이 오류가 사라지는걸 볼 수 있습니다.

더 보기

[React] 리엑트에서 table colspan (셀병합) 사용하는 방법

React[리엑트]jieey110

리엑트에서는 JSX 문법을 사용하기 때문에 기존 HTML 테그는 알아들을 수 없습니다. HTML 은 위 사진처럼 잘 나오지만 리엑트에선 JSX 문법대로 변경해줘야 됩니다. JSX 문법은 단어 앞부분마다 대문자로 표기(카엘 표기법)합니다. (예 : className , colSpan 등) colspan 을 colSpan 으로 변경해 준 모습입니다. 단어의 앞부분을 대문자로 변경해주면 리엑트에서 정상적으로 사용 가능합니다. 궁금하신것이나 이해가 안되는 부분 ,…

더 보기