Textarea에서 입력한 값 그대로 입력, 출력하기(줄바꿈 포함)

Diary앱을 개발하던 중, 유저가 Diary(textarea)를 입력하면 줄바꿈까지 포함하여 그대로 저장 및 출력이 가능하도록 개발하고자 한다.

나는 이러한 기능을 구현하기 위해서 textarea에 입력하여 저장할 때는 string을 줄바꿈(\n)을 기점으로 잘라서 배열로 저장하고,

출력을 할 때에는 반대로 배열을 string화하면서 줄바꿈을 추가하였다.

다음은 이를 구현한 코드이다.

const [update, setUpdate] = useState(``);
......
//<입력>
const onChangeText = (event: any) => {
    const {
      target: { value },
    } = event;
    const newText = value.split("\n");
    //textarea에 입력된 값들을 줄바꿈(\n)을 기점으로 배열로 잘라서 저장
    setText(newText);
    setUpdate(value);
};
//<출력>
const onUpdate = () => {
    setUpdate(text.join(`\n`));
    //text라는 배열을 DB에서 받아와서, string으로 변환(배열 요소마다 `\n`추가)
};
  .........
  	<Form onSubmit={onSubmitText}>
        <textarea onChange={onChangeText} value={update} />
        <Btn>완료</Btn>
    </Form>

성공!!👍😉