JSX :: React에서 데이터 줄 바꿈, jsx 데이터 줄 바꿈

오늘은 react로 만드는 포트폴리오를 수정하다가 json데이터에서 줄바꿈을 하는 것에서 어려움을 겪었다.

여기 끝에 보이는 것 처럼 \n을 넣어서 줄바꿈을 시도했는데, 화면에 그대로 \n이 출력될 뿐 줄바꿈이 전혀 되지 않았다. <br> 태그도 역시 마찬가지로 작동하지 않았다.

 

해결방법은 css에서 해결을 해야 한다.

  white-space:pre-wrap;

이 style 태그를 넣어주어야 한다.

pre-wrap 또는 pre-line을 쓰면 되는데, 이 태그는 공백을 코드에 있는 그대로 표시하도록 하는 태그라고 한다.

이 둘의 차이점은 다음과 같다.

 

pre-wrap : 공백을 코드에 있는 그대로 표시함. 코드에 줄바꿈이 없어도 자동 줄바꿈이 됨

pre-line: 공백을 여러개 넣어도 1개만 표시한다. 코드에 줄바꿈이 없어도 자동 줄바꿈이 된다.

 

줄바꿈 성공!