[React] textarea input에서 shift+enter로 줄 바꾸기

안녕하세요 :) 오늘은 input에서 enter가 아닌 shift+enter를 눌렀을 때 줄 바꿈이 되도록 input 엘리먼트를 변경하는 방법에 대해 포스팅하려고 합니다.

 

바닐라 자바스크립트를 이용했을경우와 리엑트를 이용했을 때 코드 패턴이 약간은 달라질 수 있는데요, 저의 경우 리엑트를 이용한 예제를 공유하려고 합니다.

 

우선 필요한 이벤트 핸들러는 키가 눌러졌을 때 트리거되는 onKeyDown과 키가 떼어졌을 때 트리거되는 onKeyUp 그리고 안의 내용이 변경되었을 때 트리거 되는 onChange입니다.

 

우선 아래와 같이 input 컴포넌트를 준비합니다.

const InputArea = ({
    value,
    onChange,
    onKeyDown,
    onKeyUp,
  }:Props) => {

	return (
        <Textarea 
          value={value}
          onChange={onChange}
          onKeyUp={onKeyUp}
          onKeyDown={onKeyDown}
        />
	)
}

그리고 아래와 같이 해당 컴포넌트에 필요한 핸들러함수를 넣어줍니다.

const [textAreaValue, setTextAreaValue] = useState('');
const [selectionStart, setSelectionStart] = useState<number>(0)

const handleOnKeyDown = (e: any, onEnter: any) => {
    if (e.nativeEvent.isComposing) return;
    const _selectionStart = e.target.selectionStart
    if (e.key === 'Enter' && e.shiftKey) {
      setSelectionStart(_selectionStart+1)
      e.preventDefault()
      const head = textAreaValue.slice(0, _selectionStart)
      const tail = textAreaValue.slice(_selectionStart)
      const text = head+'\n'+tail
      setTextAreaValue(text)
    } 
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault()
      onEnter()
    }
}

const handleOnChange = (e: any) => {
    if (!(e.nativeEvent.inputType === 'insertLineBreak')){
      e.preventDefault()
      setTextAreaValue(e.target.value)
      setSelectionStart(e.target.selectionStart)
    }
}

const handleOnKeyUp = (e: any) => {
    if (e.key === 'Enter' && e.shiftKey) {
      e.target.setSelectionRange(selectionStart, selectionStart);
    }
}