231113

JSX에서 줄바꿈해주기

공통된 컴포넌트를 mocking 변수로 뭉쳐주고, 하나의 컴포넌트에 map으로 뿌려주려고 했다. 특정 부분에 줄바꿈을 해주어야했는데, \n을 넣어서 적용해보다가 아무리 적용해도 안되어서, React.ReactNode 타입을 넣어줘야하나, 어떻게 해야하나, 고민하다가 간단한 css 스타일만 바꿔주면 된다는 사실을 할게 됐다.

export const MESSAGE_BOX: MessageBox[] = [
  {
    name: 'Notion Korea 담당자',
    logoSrc: 'icon/logo/notion-box-logo.svg',
    direction: 'left',
    message:
      '노션을 사용하시는 분들이 많지만, 아직 모르시는 분들이 많으시더라고요.\n노션의 인지도와 선호도 모두 잡고 싶어요.',
  },
];

위와 같이 적용해주고, global css body 태그 내에 다음과 같이 추가해주었다
- 참고로 tailwind를 사용하고 있고, global css에서는 css reset를 추가해준 상태였다.

body {
  white-space: pre-wrap;
}

개발을 처음할 당시에만 해도 white-space에 대해 분명 숙지했었는데, 잘 안쓰면 역시 기억하지 못한다.
최근엔 css 작업할 일이 많았는데, 프론트 개발 중에 가장 어려운 점은 css 아닐까 하는 생각을 했다.
참고로 GPT를 많이 쓰는 편인데, GPT도 어려운 알고리즘은 잘 풀어줄지 언정 css를 잘 알려주진 못한다.
위 코드는 검색을 통해 알게 됐다.

JSX에서 줄바꿈해주기​

JSX에서 줄바꿈해주기