[React] Props로 전달되는 문자열 줄바꿈 하기

 

React에서 모달 창을 띄우려고 하는데

바텀모달로 만든게 반복되는게 많다보니 재사용하기 좋도록 컴포넌트로 만들고 문자열들을 props로 전달 받아서 

그래서 어떤건 한줄이고 어떤건 두 줄로 나눠서 나올 수 있도록 하였다.

 

해당 코드는 css는 tailwind css로 작성됨 

 

✅ 하는 방법

      {blocker.state === "blocked" ? (
        <div className="fixed inset-0 flex items-center justify-center z-50">
          <div className="fixed inset-0 bg-black opacity-40"></div>
          <TemporarySave
            onClose={() => blocker.reset()}
            onLater={() => blocker.proceed()}
            textHead="나중에 이어서 쓰시겠어요?"
            textcontent={`혹시 몰라, 지금까지 쓴 내용을 \n 임시 저장해두었어요.`}
            cancleTxt="취소"
            okTxt="나중에 쓰기"
          />
        </div>
      ) : null}

 

textcontent처럼 줄바꿈 하고 싶은 구간에 \n을 추가한 뒤 

textcontent 스타일에 whitespace-pre-line을 추가해주었다.

  <div className="text-gray-500 text-center text-sm pb-4 whitespace-pre-line">
            {textcontent}
  </div>