JavaScript, React 텍스트 입력시 줄바꿈 적용 없이 작성되는 이유?

자바스크립트 텍스트 입력시 줄바꿈 적용 없이 작성되는 이유?

자바스크립트 input 또는 textarea로 텍스트를 작성하고 데이터를 보낼떄 줄바꿈 없이 하나의 이어지는 텍스트로 가게된다.

 이 현상을 해결하기 위해서 줄바꿈 하는 부분에 특정 문구를 넣어주면 해결될수있다.

 

텍스트 줄바꿈하는 부분에 특정 문구 추가하는 코드 (텍스트 입력받을떄)

// React
const onChangeContent = useCallback((e) => {
  setContent(e.target.value.replace(/(?:\r\n|\r|\n)/g, "\n"));
}, []);

// javascript
const text = document.querySelector('textarea');
const result = text.value.replace(/(?:\r\n|\r|\n)/g, "\n");

텍스트 화면에 출력할떄

// React
content.split("\n").map((v) => {
    return (
      <span key={v}>
        {v}
        <br />
      </span>
    );
  });

// javascript
const text = document.querySelector("#textarea");
const button = document.querySelector("button");
const root = document.querySelector("#root");

button.addEventListener("click", () => {
  const result = text.value.replace(/(?:\r\n|\r|\n)/g, "\n");
  const $span = document.createElement("span");

  result.split("\n").map((text, i) => {
    const $br = document.createElement("br");
    $span.append(text, $br);
  });

  root.append($span);
});

텍스트를 입력받고나서 버튼을 클릭하면 받은 텍스트 안에 엔터를 친 부분에 \n이 들어가 있다.

그부분을 split로 배열로 만들고 배열은 map메서들르 이용해 반복문을 돌려 배열 사이사에 br태그를 추가해 주는 형식으로 줄바꿈이 가능 하게 된다.