[라이브러리, react-quill] react-quill로 작성한 text를 불러올 때

1. react-quill로 글 작성

react-quill 라이브러리를 이용해 글을 작성하고 저장하면 아래와 같이 HTML 태그로 저장된다.

 

2. 저장한 글 불러오기

HTML 태그로 저장된 텍스트를 여과 없이 바로 불러오면 밑의 사진과 같이 HTML이 그대로 나온다.

 

3. dangerouslySetInnerHTML

이를 해결하기 위해선 dangerouslySetInnerHTML을 사용하면 된다.

dangerouslySetInnerHTML은 React에서 HTML 코드를 동적으로 생성하여 렌더링할 때 사용되는 기능입니다. 이 기능은 React가 일반적으로 사용하는 방식과는 다르게, 문자열로 된 HTML 코드를 React 컴포넌트에 삽입하여 렌더링하는 것입니다. <Chat gpt>

dangerouslySetInnerHTML={{ __html: postDetails.content }}

 

4. styling

 그런데.. react-quill을 이용해서 분명히 티스토리에서 글을 쓰듯 텍스트 정렬도 하고 글자 크기도 조절하고 색상도 바꾸었는데 텍스트 정렬과 글자 크기 조절이 저장후 불러온 글에는 적용되지 않아 있었다.

이를 해결하기 위해선 저장된 HTML 태그를 보고 css를 적용시켜주면 된다.

위 사진에서 ql-align-center가 보이는가..? react-quill로 가운데 정렬 후 저장하면 저런 식으로 입력되어 저장된다.

그러므로 아래와 같이 css를 적용시켜주면 된다.

/* react-quill */

.ql-align-center {
  @apply text-center;
}

.ql-align-right {
  @apply text-right;
}

.ql-align-left {
  @apply text-left;
}

/* @apply는 tailwind에서 사용하기 위한 방법이며, 
본인이 사용하는 css 적용 방식에 맞추어 사용하면 된다. */

/* 중요한 것은 className이 ql-align-center라는 것 */

 

또한 리스트를 작성하면 ul, ol 태그가 적용되는데 나는 styled-component, tailwind를 이용하여 css를 적용했다.

          <S.Viewer
            className='react-quill-viewer'
            dangerouslySetInnerHTML={{ __html: postDetails.content }}
          />


const S = {
  ...
  Viewer: styled.div`
    ol {
      ${tw`list-decimal list-inside`}
    }
    ul {
      ${tw`list-disc list-inside`}
    }
  `,
};

 

5. 요약

중요한 것은 react-quill로 작성 후 저장한 텍스트가 HTML태그 형식이며
불러온 후 className과 HTML TAG를 이용하여 CSS를 적용할 수 있다는 것