📱테스트 환경
"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 축으로 늘어질 수 있도록 변경되었다.
'Javascript > React' 카테고리의 다른 글
[React] console.log 두번 출력될때 React.StrictMode (0) | 2024.04.11 |
---|---|
[React] 이미지 클릭 시 파일 선택 <Input /> 사용하기 (0) | 2024.04.09 |
[React] input value 값 수정 안될때 defaultValue (0) | 2024.04.05 |
[React] axios instance 만들어서 사용하기 (0) | 2024.04.05 |
[React] ReactJS 가 인기가 많은 이유 (0) | 2023.08.16 |