[HTML/CSS] textarea 개행 안되는 문제 해결 (Feat. React)

(※ 저는 React와 Firebase를 사용하는 도중 문제가 발생하였습니다.)

 

 

 

 <textarea> 태그를 사용하여

1)글을 작성 한 후,

2)DB에 저장하고,

3)출력을 했더니,

개행(Enter)이 모두 띄워쓰기(Space)로 치환되어 출력되는 현상이 발생하였습니다.

 

 

인터넷에서 유사한 문제가 발생한 사람들이 몇몇 있었으나 /n으로 저장이 되고 제대로 출력되지 않는 현상이었고, 저는 DB에 띄워쓰기로만 저장되는 상태였습니다.

 

(※ 문제를 해결한 사람들 중에 "white-space: pre-wrap;를 통해서 해결하였다"는 분들도 계셨으나, 일단 저는 해당 방법으로 해결되지 않았습니다.)

 

 

 

const formattedDescription = item.description.replace(/\r?\n/g, '\\n');

textarea에 입력을 진행하였을 때 결과를 log로 출력해보면 개행이 잘 되어 있는 것을 확인할 수 있었습니다.

 

우선 DB에 저장하기 전 개행을 강제로 \n으로 변경해주는 작업을 진행하고 DB에 저장하였습니다.

 

 

 

위 코드를 적용 후 DB의 데이터를 화면에 출력하였을 때 정상적으로 \n이 잘 출력되는 것을 확인할 수 있었습니다.

 

 

 

// 개행을 진행하는 함수
function addLineBreaks(text) {
    console.log('break 들어온다!');
    const newText = text.split('\\n').map((str, index, array) =>
        index === array.length - 1 ? (
            str
        ) : (
            <React.Fragment key={index}>
                {str}
                <br />
            </React.Fragment>
        )
    );
    return newText;
}

// ...
    
<p className='itemdetail__description'>{addLineBreaks(data.description)}</p>

다음으로는 \n을 개행으로 변경해야 합니다.

 

위에 작성한 addLineBreak() 함수는 \n을 기준으로 텍스트를 나누고, 각 부분을 <br> 태그로 대체하여 JSX 배열을 반환합니다.

 

 

 

결과적으로 이전에 \n이 개행한 것과 동일하게 수정되어 잘 출력되는 것을 볼 수 있습니다.