textarea로 업로드한 텍스트 조회시 그대로 처리하기

1. css 처리하기

white-space: pre-wrap;
word-break: break-all;

1. <pre>태그로 감싼다.

<InquiryDetailContent>
    <pre>{data?.content}</pre>
</InquiryDetailContent>

textarea로 입력 받은 글을 공백과 줄바꿈을 살려 출력하기

링크 입력하면 자동으로 링크로 변환되어 출력

react-linkify를 설치하였다…

문제점 : 일단 타입스크립트를 자동으로 지원해 주지않기 때문에 라이브러리의 타입을 설치해줘야한다.

하지만 여기서 Linkfiy에 대한 props로 properties를 넘기는데 적용이 되지 않았다….

블로그를 찾아본 결과 0.2.2 버전에서만 동작한다고한다….. 그래서 0.2.2버전으로 설치함.

설치

npm i react-linkify

npm i @types/react-linkify

npm i [email protected]

추가 모듈 declare

// custom.d.ts에서 모듈 declare를 해줘야한다.

declare module 'react-linkify' {
  export default class Linkify extends React.Component<any, any> {}
}

최종 사용 코드

				<pre>
          <InquiryDetailContent>
            <Linkify
              properties={{
                target: '_blank',
                style: { color: theme.color.mainGreen },
              }}
            >
              {data?.content}
            </Linkify>
          </InquiryDetailContent>
        </pre>