본문 바로가기
React

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

by jyee 2024. 9. 26.
728x90
반응형

 

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>

 

728x90
반응형