[React, css] textarea 사용시 여러가지 처리

다양한 입력폼을 다룰때 input말고도 textarea도 상당히 많이 다루는 편인데, 

textarea도 input과 별개로 은근히 많은 커스텀을 해줘야 합니다. 

 

기본 textarea 같은 경우 resize 옵션이 기본으로 들어가 있고, 

input과 달리 textarea 는 여러 줄의 글을 길게 입력하는데 사용되기 때문에, 

출력시에도 따로 처리를 해줘야합니다. 

 

1. textarea resize 사용하지 않기 

2. textarea placeholder 에서 줄바꿈 처리하기

3. textarea 에서 tab 사용하기 

 

 

---

1. 기본 소스 

- JSX

import { useState } from 'react'
import './app.css'

function App() {

  const [textValue, setTextValue] = useState("");
  const handleSetValue = (e) => {
    setTextValue(e.target.value);
  };

  return (
    <div className="app">
      <textarea
        placeholder="여기에 입력하세요"
        value={textValue}
        onChange={(e) => handleSetValue(e)}
      ></textarea>
      <hr />
      <p className="paragraph">{textValue}</p>
    </div>
  );
}

export default App;

- CSS

.app {
    padding: 10px
}

textarea {
    width: 250px;
    height: 200px;
  }

placeholder, 입력 값, 출력 값

 

---

2. textarea resize 사용하지 않기 

기본으로 마우스 드래그로 textarea의 사이즈를 자유롭게 조절 할 수 있는 옵션이 있습니다. 

이는 css 로 간단하게 처리할 수 있습니다. 

textarea { resize: none; }

 

3. textarea placeholder 에서 줄바꿈 처리하기

placehoder 에서 여러 줄로 표시를 하고 싶다면 특수문자를 표현하는 코드를 추가해주면됩니다. 

정확한 차이는 모르겠으나, 
 혹은 
 또는 두개를 같이 입력해줘도 먹힙니다.  

 <textarea placeholder="여기에&#13;&#10;입력하세요"></textarea>

 

4. textarea 에서 tab 사용하기

textarea에서 tab을 입력하게 되면 일반적으로 다음 Element로 focus 가 넘어가 버리기때문에 tab입력이 불가합니다. 

이를 구현하기 위해 keyCode값을 받아 9(tab의 keyCode값)인 경우 기본 기능인 다음 Element에 포커스 이동을 방지처리를 해준 뒤, select가 된 시작점과 끝점을 구해 그 사이에 "\t" 값을 넣어주면 됩니다. 

\t를 입력하는것이 tab을 입력하는 것과 같은 처리를 해준다고 보면 됩니다.

 

※ 참고로 keyCode값은 onChange로 받지 않고 onKeyDown으로 받습니다.

 

로직을 정리해 보면 다음과 같습니다. 

1. 포커스 기능 방지

 e.preventDefault();

2. selection 기준으로 시작과 끝 구하기

let start = e.target.selectionStart;
let end = e.target.selectionEnd;

3. \t 삽입하기

value = val.substring(0, start) + "\t" + val.substring(end);

해당 코드는  React에서 구현되었지만, javascript나 jquery로 구현할때도 똑같은 원리입니다. 

 

4. 출력시 \t, \n 처리하기

이렇게 입력시 따로 처리를 해도 출력시에는 모두 무시된 채로 출력되는 경우가 있습니다. 

이는 일일이 split을 하여 코드를 삽입하는 경우도 있지만 css를 통해 쉽게 처리할 수 있습니다. 

white-space: pre-wrap;

 

결과화면

 

---

결과코드