1. 이슈
이번 프로젝트 진행시 게시물 작성하는 페이지가 있어고 이 게시물 작성을 하기위해 React-quill라이브러리를 사용하였다. 내가 구현한 페이지가 아니라 그저 단순하게 보내준 텍스트 데이터에 대해서 값만 걸어주면 될거라 생각하였는데 전혀 그렇지 않았다.
막상 텍스트 데이터를 받고나니 텍스트에 html 테그가 감싸져서 넘어오는거였다. 내용을 찾아보니 React-quill은 텍스트 작성시 우리 눈에는 보이지않지만 html 태그가 감싸져서 작성이 되고있고 그 태그내용이 백엔드로 넘어갈때는 태그 내용까지 string화 되어 넘어가는것이었다. 그래서 역시나 항상 그랬듯 예상하지 못했던 태그를 벗겨내는 작업에 들어가게 되었다.
2. 해결과정
2-1 1차 해결
방법은 의외로 간단하였다 HTML을 파싱하여 텍스트만 추출해주는 함수를 만들어준뒤 백엔드에서 받아온 데이터에서 HTML 태그를 제거하고 텍스트만 추출하는 과정만 거쳐주면 간단하게 태그를 제거한 깔끔한 텍스트 데이터 결과를 렌더링 시킬수 있었다.
// HTML을 파싱하여 텍스트만 추출하는 함수
function extractTextFromHTML(html: string) {
const parser = new DOMParser();
const doc = parser.parseFromString(html, 'text/html');
return doc.body.textContent || '';
}
// 백엔드에서 받아온 데이터에서 HTML 태그를 제거하고 텍스트만 추출
const textWithoutTags =
postingData.length > 0
? extractTextFromHTML(postingData[0].feedContent)
: '';그런데 여기서 문제가 게시물 작성시 줄바꿈을 했을때이다.
줄바꿈을하게되면 React-quill라이브러리에서 자동으로 <br/> 태그를 추가하게되는데 이 태그또한 이러한식으로 태그를 벗겨내게되면 줄바꿈이 적용되지않는 에러가 발생하게 되었다.
2-2 2차 해결
여러방법을 백방으로 찾아본결과 아주 간단한 방법이였다. 처음에 적용하였던 방법을 적용할 필요가 없었다. 방법은 다음과 같다.
<div dangerouslySetInnerHTML={{ __html: postingData[0].feedContent }} />텍스트 내용을 추가해줄 태그에 dangerouslySetInnerHTML 요소를 적용해준뒤 __html 키를 입력해준뒤 value에 불러올 데이터를 입려해주면 아주 간단하게 해결될 수 있었다.
참고사항). dangerouslySetInnerHTML 은?
dangerouslySetInnerHTML은 React 라이브러리에서 사용되는 속성이다. 이 속성은 문자열 형태의 HTML을 사용하여 React 컴포넌트의 내부 콘텐츠를 동적으로 생성하는 데 사용된다.
React는 기본적으로 XSS(cross-site scripting) 공격으로부터 보호하기 위해 콘텐츠를 이스케이프(escape) 처리하고, HTML을 텍스트로 취급한다. 그러나 때로는 외부 소스에서 제공되는 HTML을 동적으로 렌더링해야 할 때가 있다. 이때 dangerouslySetInnerHTML 속성을 사용하면 React가 HTML을 그대로 렌더링할 수 있다.
dangerouslySetInnerHTML 속성은 객체를 값으로 갖는데, 이 객체는__html이라는 특수한 키를 가지고 있습니다. 이 키의 값으로 HTML 문자열을 설정하면 해당 컴포넌트의 내부에 그 문자열이 그대로 삽입된다.
예를 들어, 다음과 같이 dangerouslySetInnerHTML을 사용하여 HTML 문자열을 렌더링할 수 있다.
function MyComponent() {
const htmlString = '<strong>Hello, world!</strong>';
return (
<div dangerouslySetInnerHTML={{ __html: htmlString }}></div>
);
}위의 예제에서, dangerouslySetInnerHTML 속성을 사용하여 htmlString 변수의 값을 HTML로 렌더링한다. 이는 React의 일반적인 방식과는 달리 텍스트를 이스케이프하지 않고 그대로 렌더링하므로, 주의해야 할 사항이다.
dangerouslySetInnerHTML 속성을 사용할 때는 주의해야 한다. 잘못된 사용은 보안상의 위험을 초래할 수 있다. 외부에서 제공되는 HTML을 렌더링해야 하는 경우, 항상 신뢰할 수 있는 소스에서만 HTML을 받아오고, 적절한 XSS 필터링을 수행해야 한다.
