textarea 로 글을 입력받아 출력을 했을때 , 줄바꿈(\n)이 적용되지 않았다.

문제

const CommentTextArea = styled.textarea`
    height: 60px;
    border: 1px solid #969bab;
    border-radius: 6px;
    width: 90%;
    color: #000;
    font-size: 14px;
    resize: none;
`;

<CommentTextArea
    name=""
    id=""
    placeholder="댓글"
    value={inputReply}
    onChange={onChangeInputReply}
>
    {'댓글'}
</CommentTextArea>

div를 이용해 출력하면 줄바꿈이 적용되지 않고 하나의 행으로 출력된다.

const Contents = styled.div`
    color: #000;
`;

<Contents>{comment}</Contents>

🛠 해결

이를 해결하기 위해 white-space: pre; 속성을 주면 줄바꿈이 적용되어 출력된다!

const Contents = styled.div`
    color: #000;
    white-space: pre;
`;

<Contents>{comment}</Contents>

MDN white-space