[React] props로 전달받은 문자열 줄바꿈 하기 + (tailwindCSS)

자기소개서 페이지 작성 중 중복되는 부분이 너무 많아서 중복부분을 컴포넌트화 해서 가져다 쓰면서 props로 전달받은 Description이

가독성 떨어지게도 한줄로 줄줄 쓰여지는 것이다..

globals.css에 white-space: pre-line; 도 줘 봤지만 안되고..

다른 블로그를 보고 replace를 사용해서 써 볼까 생각도 해봤지만.. 다들 그렇지 않은가영 내키지가 않았다. 게다가 

tailwindCSS를 사용하니 배로 헷갈려서!!

 

삽질만 엄청나게 하다가 이렇게 해결했다 ㅎㅎ

해결 전 description 상태

 

✨해결

.timeline-description {
  white-space: pre-line;
}

globals.css에 css를 작성 해 주고

 

import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

const Timeline = ({ title, icon, items }) => {
  return (
    <>
      {" "}
      <div className="flex flex-row items-start my-4 mb-3">
        <FontAwesomeIcon icon={icon} className="text-lg mr-2 mt-1" />
        <h2 className="text-2xl font-bold">{title}</h2>
      </div>
      <div className="flex flex-col space-y-4">
        {items.map((item, index) => (
          <div className="border-l-2 border-blue-900 pl-4" key={index}>
            <h3 className="text-lg font-semibold">{item.title}</h3>
            <p className="text-gray-600 timeline-description">
              {item.description}
            </p>
          </div>
        ))}
      </div>
    </>
  );
};

export default Timeline;

className에 timeline-description을 적용했더니 description에 \n 입력 기준으로 줄이 나뉘어 졌다 ㅎㅎ

 

이렇게 제대로 줄바꿈이 들어간 모습!

 

코딩하면서 드는 생각인데 참 생각지도 못한 부분에서 자꾸 오류가 생겨서.. 하나하나 배워가는 맛이 있는 것 같다.