React string 줄바꿈

문제 상황

<br> 태그를 넣으면 줄바꿈이 되지 않는다.

export const QUESTION_LIST: Question[] = [
    {
        id: "1",
        question: {
            situation: "오늘은 크리스마스 홈파티 하는 날.<br>방을 어떻게 꾸밀까?",
            ask: "고민하는 나는?",
        },
        answer: {
            a: "오늘은 특별한 날 화려하게 꾸민다.",
            b: "그래도 단순한 게 좋다. 미니멀하게 꾸민다."
        }
    },

해결

1. "텍스트<br>텍스트"을 `텍스트\n텍스트`로 변경
2. white-space: pre; 추가

export const QUESTION_LIST: Question[] = [
    {
        id: "1",
        question: {
            situation: `오늘은 크리스마스 홈파티 하는 날.\n방을 어떻게 꾸밀까?`,
            ask: "고민하는 나는?",
        },
        answer: {
            a: "오늘은 특별한 날 화려하게 꾸민다.",
            b: "그래도 단순한 게 좋다. 미니멀하게 꾸민다."
        }
    },

참고자료

• stackoverflow