[Next.js] 렌더링 된 화면에서 줄바꿈이 되지않을때 ~!

HTML5, CSS 단이었다면 되게 간단히 생각했을법도 한데 괜히 Next.js 가 엮여있어서 생각이 안났다는 핑계를 대본다 ..
여튼 포트폴리오를 만들고 있는데 굳이 DB 까지 연동할 필요는 없을것 같아서 그냥 component 각 폴더에 ___data.tsx 형식으로 데이터를 다 넣어줘서 불러오는 식으로 꾸며주고있다.

#/component/Project/projectData.tsx

import { Project } from "@/types/project";

const projectData: Project[] = [
  {
    id: 1,
    title: "뱀팔이",
    paragraph: `국내 희귀애완동물 샵 및 병원을 한곳에서 볼 수 있는 뱀팔이
    웹 사이트 제작 한칸띄어쓰기를 어떻게 넣을수 있을까?
    왜 안될까?
    `,
    image: "/images/project/baam82.png",
    link: "https://baam82.kr/",
    type: "개인",
    publishDate: "2018.12 ~ 2019.01",
    stack: ["PHP","HTML5","CSS3","jQuery","javascript","MySql","Jenkins","Github","AWS"]   
  },
  ..
  
  생략
];
export default projectData;

#/types/project.ts

export type Project = {
  id: number;
  title: string;
  paragraph : string;
  image: string;
  link: string;
  type: string;  
  publishDate: string;
  stack: string[];
};

paragraph 에 백틱으로 선언한것은 따옴표나 홀따옴표로 그냥 넣으면 줄바꿈 했을때 에러가 나기 때문에 백틱으로 감쌌다.여튼 저건 중요한게 아니고 내가 원하는건 정말 간단했다.

저기 넣은 내용대로 렌더링 됐을때 줄바꿈까지 출력되면 되는것

# /component/Project/SingleProject.tsx
'use client'
import { Project } from "@/types/project";

const SingleProject = ({ project }: { project: Project }) => {

	const { id,title,paragraph,image,link,type,publishDate } = project;  
	
	... 생략
	
    console.log(project.paragraph);
    return (
    	<>
			... 생략
        	<div>
            	{project.paragraph}
            </div>
        	... 생략
        </>
    ) 
};

export default SingleProject;

실행해보면 아래처럼 렌더링 화면에서는 줄바꿈이 정상적으로 되지않지만 , 콘솔창에선 잘만되는것을 확인 할 수 있었다.

 

첫번째 시도

//paragraph 에 값이 있으면 불러와서 \n 으로 들어가있는거 br 태그로 치환해줌
const formattedParagraph = project.paragraph ? project.paragraph.replace(/\n/g, '<br/>') : '';


//출력할때 아래와 같이 기입
<p dangerouslySetInnerHTML={{ __html: formattedParagraph }} />

이건 뭐랄까 .. 잘되긴 하는데 너무 헤비했다 
아무리 리액트를 모르는 초짜인 내가봐도 이건 좀 .. 싶은 느낌이랄까
굳이 댕져러쓰 가 들어가있는 태그를 써야하나..
보통 외부 HTML 콘텐츠 표시 할때 쓰인다길래 내가 원하는 방식이 아니었다.

두번째 시도
왜 이걸 생각 못했을까 싶은데 역시나 옛것이 최고인것인가 ..

# /styles/index.css 내용 추가

@layer base {
  body {
    font-family: "Inter", sans-serif;
  }

  .preserve-whitespace {
    white-space: pre-line;
  }
}

위처럼 css 로 조정해주니 아래처럼 잘 나오는것을 확인 할 수 있었다.

까먹지않기 위해 작성하는 포스팅 ~!