Draft.js는 React 기반의 풍부한 기능을 제공하는 웹 텍스트 편집기입니다. 이 편집기를 사용하면 엔터 키와 백스페이스 키의 동작을 커스터마이징할 수 있습니다. 이 글에서는 Draft.js를 이용하여 엔터 키와 백스페이스 키의 동작을 제어하는 방법에 대해 알아보겠습니다.

엔터 키의 동작 제어하기

Draft.js에서 엔터 키의 기본 동작은 새로운 블록을 생성하고 커서를 그 블록으로 이동시키는 것입니다. 때로는 이 동작을 변경하고 싶을 수 있는데, 예를 들어 Shift + 엔터 키를 눌렀을 때 새로운 블록을 생성하고 아닌 경우에는 줄바꿈을 수행하도록 하고 싶을 수 있습니다.

이를 구현하기 위해서는 Draft.js에서 제공하는 keyBindingFn 함수를 사용해야 합니다. 이 함수는 키 입력 이벤트를 받아서 해당 키의 동작을 제어하는데 사용됩니다. 다음은 엔터 키를 눌렀을 때의 동작을 커스터마이징하는 예제 코드입니다.

const handleKeyCommand = (command, editorState) => {
  if (command === 'my-custom-enter') {
    // 새로운 블록 생성 로직 작성
    return 'handled';
  }
  return 'not-handled';
};

const keyBindingFn = (e) => {
  if (e.keyCode === 13 && e.shiftKey) {
    return 'my-custom-enter';
  }
  return getDefaultKeyBinding(e);
};

// Editor 컴포넌트에서 keyBindingFn 함수와 handleKeyCommand 함수를 props로 전달
<Editor
  keyBindingFn={keyBindingFn}
  handleKeyCommand={handleKeyCommand}
/>

위 코드에서 keyBindingFn 함수는 shift + 엔터 키를 눌렀을 때 ‘my-custom-enter’를 반환하도록 설정하고, handleKeyCommand 함수에서는 ‘my-custom-enter’ 명령에 대한 로직을 작성하면 됩니다.

백스페이스 키의 동작 제어하기

백스페이스 키의 동작을 제어하는 방법도 비슷합니다. 예를 들어, 백스페이스 키를 눌렀을 때 특정 조건을 만족하지 않으면 삭제를 막고 싶을 수 있습니다.

Draft.js에서 제공하는 keyBindingFn 함수와 handleKeyCommand 함수를 이용하여 백스페이스 키의 동작을 제어할 수 있습니다. 다음은 백스페이스 키를 눌렀을 때의 동작을 커스터마이징하는 예제 코드입니다.

const handleKeyCommand = (command, editorState) => {
  if (command === 'my-custom-backspace') {
    // 삭제 로직을 수행하기 전에 특정 조건을 체크
    if (myCheckCondition()) {
      // 삭제 로직 작성
      return 'handled';
    } else {
      return 'not-handled';
    }
  }
  return 'not-handled';
};

const keyBindingFn = (e) => {
  if (e.keyCode === 8) {
    return 'my-custom-backspace';
  }
  return getDefaultKeyBinding(e);
};

// Editor 컴포넌트에서 keyBindingFn 함수와 handleKeyCommand 함수를 props로 전달
<Editor
  keyBindingFn={keyBindingFn}
  handleKeyCommand={handleKeyCommand}
/>

위 코드에서 keyBindingFn 함수는 백스페이스 키를 눌렀을 때 ‘my-custom-backspace’를 반환하도록 설정하고, handleKeyCommand 함수에서는 ‘my-custom-backspace’ 명령에 대한 로직을 작성하면 됩니다. 특정 조건을 만족하지 않는 경우 ‘not-handled’를 반환하면 삭제 동작이 막히게 됩니다.

Draft.js를 사용하면 엔터 키와 백스페이스 키의 동작을 자유롭게 커스터마이징할 수 있습니다. 위 예제 코드를 참고하여 필요한 동작을 제어해보세요!