[MyDiary] React TextArea 개행(</br>) 처리

구현 목표

TextArea에서 Enter(개행)를 입력한 그 값을 다른 플랫폼(Database, Notepad)으로 텍스트를 옮기면 개행이 없어진다.

개행이 그대로 보존되어 다른 플랫폼에서도 개행된 텍스트를 저장한다.

구현 방법

간단하다. TextArea에서 개행을 하면 TextArea내에 </br>이 입력된다. 이를 DB나 다른 Text 입력기에 옮기면 그 즉시 </br>은 없어진다.

그렇다면 TextArea에서 저장되는 </br>을 다른 플랫폼에서도 통용되는 \n\r로 바꾸면 된다.

 

MyDiary 프로젝트에서는 TextArea에서 onChange 이벤트를 통해서 변경될때 마다 setState를 하여 Contents에 값을 저장한뒤 Submit을 통해서 MongoDB에 전송하고 있다.

사용자가 Submit을 하여 MongoDB에 전송하기 이전에 사용자가 입력한 Contents값의 </br>을 \n\r로 바꾸어준다.

구현 코드 

1차 구현코드

Contents(TextArea)의 onChange 이벤트로 연결된 함수 :

const contentsChangeHandler = useCallback((e) => {
    let contents: string = e.currentTarget.value;
    contents = contents.replaceAll("<br>", "\r\n");

    setContents(contents);
  }, []);

 

Submit 이벤트로 연결된 함수 :

const onsubmitHandler = () => {
    const body = {
      date: date,
      title: title,
      wheather: weather,
      emotion: emotion,
      location: mapLocation,
      content: contents,
      image: images,
    };
}

 

onChange 이벤트로 연결되어 사용자가 개행하는 즉시 \r\n으로 변환하였다.

이후 변환한 값을 setState로 저장하여 submit한다.

최종 개선코드

Contents(TextArea)의 onChange 이벤트로 연결된 함수 :

const contentsChangeHandler = useCallback((e) => {
    setContents(e.currentTarget.value);
  }, []);

 

Submit 이벤트로 연결된 함수 :

const onsubmitHandler = () => {

    const contentsReplaceNewline = () => {
      return contents.replaceAll("<br>", "\r\n"); 
    }

    const body = {
      date: date,
      title: title,
      wheather: weather,
      emotion: emotion,
      location: mapLocation,
      content: contentsReplaceNewline(),
      image: images,
    };
  }

 

1차적으로 작성한 코드에서는 onChange로 TextArea에서 값이 변동될때마다 replace연산을 한다, 너무 비효율적이다.

차라리 사용자가 DB로 작성한 글을 전송하기전 사용자가 입력한 </br>을 \n\r로 한번에 변환하는 것이 좀 더 효율적이다.

따라서 사용자가 글 작성을 마친 후 submit 버튼을 누를때 </br>을 \r\n로 변환하는 연산을 마친 후 DB로 보내도록 변경하였다.