[React] dangerouslySetInnerHTML 화면 넘어감

📱테스트 환경

"react": "18.2.0"
"react-dom": "18.2.0"
"typescript": "^4.9.5"

 

---

 

ReactQuill 라이브러리를 사용하였고, 여기서 작성한 값을 저장하려고 하니까 태그가 함께 값이 넘어왔고

스타일을 이대로 넣기 위해 dangeroulsySetInnerHTML 을 사용하였다.

<Content dangerouslySetInnerHTML={{__html: articles?.content ? articles?.content : ""}}></Content>

styled-components 를 사용하여 디자인을 하고있었고 해당 Content 디자인은 아무것도 적용하지 않은 상태였다.

어차피 태그에 적용된 스타일대로 들어갈 것이라고 예상했고, 그냥 그대로 보여주면될 것이라고 생각했기 때문이다.

export const Content = styled.div``;

그래도 이렇게 만들어놓은 이유는 나중에 혹시나 디자인이 필요한 경우 작업하기 위해서 만들어놓았다.

<blockquote>
	<strong>
		<em>
			<s>
				<u>
					ttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttest
                </u>
            </s>
        </em>
    </strong>
</blockquote>
<blockquote>
	<blockquote>
    	<strong>
        	<em>
            	<s>
                	<u>
                    	<span class="ql-cursor"></span>
                        ttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttestttttest
                    </u>
                </s>
            </em>
        </strong>
    </blockquote>

이런식의 HTML 코드였고

화면은 이런식으로 쭉 넘어가서 스크롤이 생겨버린 상황이였다.

이를 해결하기 위해

const Content = styled.div`
    max-width: 100%; /* 컨테이너 최대 너비를 부모 요소에 맞춤 */
    overflow: auto; /* 내용이 넘치면 스크롤바 표시 */
    word-wrap: break-word; /* 긴 단어가 있을 때 줄바꿈 */
`;

해당 스타일을 적용하였고

이런식으로 줄바꿈하고 넘어간 텍스트들이 X 축으로 쭉 늘어지는게 아니라 Y 축으로 늘어질 수 있도록 변경되었다.