react textarea 줄바꿈(개행) 이슈 처리하기 위한 과정

textarea의 기본 enter event가 줄바꿈인 줄 알고 있었으나, 아무리 엔터를 눌러봐도 줄바꿈이 안되는 현상이 발생했다.

 

---

2022.12.09 수정

줄바꿈이 안됐던 이유를 찾았다.Form 태그 안에서 textarea를 사용하면 엔터 이벤트가 안된다고 한다.Form태그가 있는 상위컴포넌트로 가서 textarea가 들어있는 하위 컴포넌트만 Form 바깥으로 빼줬더니 아래에서 엔터 이벤트를 적용하기 위해 짰던 코드가 필요가 없어졌다.(단, 이 textarea를 Form 태그안에 담아서 POST를 보내야 하는 경우엔 다른 방법을 생각해봐야 할 것 같다.)

---

찾아본 결과 textarea에 직접 onkeyDown으로 enter event를 만들어 보내주는 방법이 있어서 적용해보았다.

 

const handleKeyDown: KeyboardEventHandler<HTMLTextAreaElement> = (e) => {
    const adminText = target.current;
    
   //엔터키를 누를때마다 줄바꿈 되도록 하는 코드
    if (adminText && e.key === 'Enter') {
      adminText.value = `${adminText.value}\n`;
    }
    
    //줄바꿈 시 자동으로 textarea height도 하단으로 내려가도록 하는 코드
    if (adminText && adminText.scrollHeight > adminText.clientHeight) {
      // textarea height 확장
      adminText.style.height = `${adminText.scrollHeight}px`;
    }
   
    else if (adminText && adminText.scrollHeight <= adminText.clientHeight) {
      // textarea height 축소
      adminText.style.height = `${adminText.scrollHeight - 21}px`;
    }
  };

<textarea
    ref={target}
    id="target"
    placeholder="코멘트를 입력해주세요."
    value={value}
    onChange={handleChange}
    onKeyDown={handleKeyDown}
/>
<Button variant="outlined" onClick={handleAdd}>추가</Button>

문제없이 잘 작동한다.

{/* {data?.contents?.split('\n').map((item, idx) => {
  return (
    <div key={idx}>
      {item}
      <br />
    </div>
  );
})} */}

뿌려줄 때는 '\n'을 기준으로 잘라서 map을 돌려서 줄이 바뀌도록 했다. 

 

추후에 찾아보니 이렇게 map을 돌리지 않아도 간단하게 해결할 수 있는 방법이 있었다.

<Stack whiteSpace="pre-wrap">
    {findAdminAnswer?.contents}
</Stack>

받아오는 데이터를 div태그 등으로 감싸서 스타일에 white-space: pre-wrap 을 넣어주면 해결된다.

 

그런데 textarea에 텍스트를 입력할 때 윈도우에서는 잘 작동하지만 맥(Mac)에서는 줄바꿈이 이상해지는 현상이 발생했다.

 

예를들어,

안녕

하세요.

를 입력했을 때, 윈도우에서는 정상적으로 줄바꿈이 적용되지만

 

맥에서는

안녕

녕

하세요.

로 줄바꿈 시 마지막 글자가 따라내려오는 현상이 발생했다.

해결법을 찾게되면 덧붙여야겠다.

 

추측1

영어가 아닌 글자들은 한 글자가 영어보다 많은 정보를 담고있기 때문에 키 입력 순간까지 시간이 걸리고, keyDown 이벤트가 이미 발생되고 난 후에도 이벤트가 아직 진행 중일 수 있다는 것.

그래서 이벤트가 미처 끝나기 전에 줄바꿈을 해버려서 아직 이벤트가 실행중인 마지막 글자가 딸려내려오는 것 일수도 있다는 글을 보았다.

 

 

참고블로그

https://kwangsunny.tistory.com/33

keydown 이벤트 한글 중복 입력 현상

만약 Form 안에서 textarea value값을 담아 POST를 해야 하는 경우라면, 위 자료를 토대로 다시 생각해봐야 할 것 같다.