[FE]나만의 시험지의 에디터와 툴바를 직접 제작한다.(기본 툴바 제작)

앞서 포스팅에서 react-quill을 사용하지 않고 직접 에디터와 툴바를 제작하기로 결정 했다. 그러기 위해서는 두가지를 알아야 한다. 첫 번째로 contentEditable과 execCommand이다. 

# contentEditable

contentEditable은 HTML 요소의 속성(attribute) 중 하나로, 사용자가 해당 요소의 내용을 직접 편집할 수 있게 하는 기능을 활성화하는 역할을 한다. 따라서 원하는 태그에 contentEditable="true"를 기입하게 되면 웹 페이지나 웹 애플리케이션에서 텍스트 입력 상자나 편집 가능한 컨텐츠가 된다. 사용하는 방법은 아래와 같다.

      <div

        className="editor"

        contentEditable="true"

        dangerouslySetInnerHTML={{ __html: content }}

        ref={editorRef}

        style={{ padding: '16px 24px', border: '1px solid #D6D6D6', borderRadius: '4px' }}

      />

 

따라서 div태그가 편집을 할수 있게 된 것이다. 사용자가 입력을 직접 기입할 수 있는 에디터로 지정이 된 것이다. 여기서 dangerouslySetInnerHTML={{ __html: content }}는 content라는 변수에 들어 있는 HTML 문자열을 해당 <div> 요소의 내부 HTML로 설정하는 역할을 한다. 따라서 content에 있는 HTML이 <div> 내부에 렌더링된다. 즉, content에는 HTML 문자열로 저장이 되어 있는데 이것을 일반 문자열로 렌더링 하기 위해서 dangerouslySetInnerHTML로 렌더링이 되는 것이다. 하지만 우리는 HTML문자열로 잘 저장이되는지 임시로 확인하기 위해 아래 div태그를 추가해서 확인 해보고 있다.

   <div>

        <p>Content (HTML string):</p>

        {content}

   </div>

# ref={editorRef} 그리고 useRef

* ref={editorRef

ref={editorRef}의 ref는 react에서 사용되는 특별한 속성으로, react 엘리먼트나 컴포넌트에 대한 참조를 생성하는 데 사용된다. 이를 통해 DOM 요소에 직접적으로 접근하거나 조작할 수 있다.

* useRef

useRef는 react에서 함수형 컴포넌트에서도 값이 변할 수 있는 상태를 유지할 수 있도록 도와주는 Hook이다. 이를 사용하여 DOM 요소에 접근하거나, 컴포넌트 내부에서  값이 변할 수 있는 상태를 유지할 수 있다. 여기서 const editorRef = useRef(null);은 초기값이 null인 새로운 ref를 생성하는 것이다. 이 editorRef는 <div> 요소에 대한 참조를 저장할 수 있는 변수이다. useRef를 통해 생성된 editorRef를 사용하면 해당 변수를 통해 <div> 요소에 직접적으로 접근할 수 있다. 즉, useRef를 사용함으로 내가 원하는 DOM 요소에 ref를 통해 참조를 해서 DOM요소에 접근하는 것이다. 이제 앞으로 eidtorRef를 계속 해서 참조하게 되는 함수들이 등장할 것이다. 유심히 확인할 필요가 있다.

# 툴바를 제작한다.

앞서 우리는 contentEditable을 이용해서 툴을 사용 할 수 있는 환경을 구성했다 이제 각기 필요한 버튼들을 구현 해보겠다.

 

   <div className="editor-menu" style={{ marginBottom: '10px' }}>

        <button onClick={handleBoldClick} style={{ marginRight: '5px' }}><b>B</b></button>

        <button onClick={handleItalicClick} style={{ marginRight: '5px' }}><i>I</i></button>

        <button onClick={handleUnderlineClick} style={{ marginRight: '5px' }}><u>U</u></button>

        <button onClick={handleStrikeClick} style={{ marginRight: '5px' }}><s>S</s></button>

        <button onClick={handleOrderedListClick} style={{ marginRight: '5px' }}>OL</button>

        <button onClick={handleUnorderedListClick} style={{ marginRight: '5px' }}>UL</button>

        <button onClick={handleUploadImageClick} style={{ marginRight: '5px' }}>IMG</button>

    </div>

 

위와 같은 버튼들을 구현하고 각기 효과를 줄 수 있는 함수들을 구현 해보았다. 

 

  const focusEditor = () => {

    editorRef.current.focus({ preventScroll: true });

  };

  // execCommand를 기준으로 생성된 코드

  function setStyle(style) {

    document.execCommand(style);

    focusEditor();

  }

 

  const handleBoldClick = () => {

    setStyle('bold');

    focusEditor();

  };

  const handleItalicClick = () => {

    setStyle('italic');

    focusEditor();

  };

  const handleUnderlineClick = () => {

    setStyle('underline');

    focusEditor();

  };

  const handleStrikeClick = () => {

    setStyle('strikeThrough');

    focusEditor();

  };

  const handleOrderedListClick = () => {

    setStyle('insertOrderedList');

    focusEditor();

  };

 

const handleUnorderedListClick = () => {

  setStyle('insertUnorderedList');

  focusEditor();

};

 

위와 같은 코드들을 구성을 보면 너무 가독성이 떨어진다고 느껴진다. 그래서 이 코드를 조금 더 간소화 할 수 있지 않을까 고민 했다. 그래서 버튼의 value 값으로 각기 스타일 이름으로 정의하고 이를 이벤트로 처리함으로 value값을 가져와 setStyle의 execCommand 함수에 전달해준다. 그렇게 execCommand에서 html 문자열로 해당 효과들을 처리하게 된다. 아래 코드는 위의 고안점을 적용한 코드들이다.

 

  const focusEditor = () => {

    editorRef.current.focus({ preventScroll: true });

  };

 

  function setStyle(style) {

    document.execCommand(style);

    focusEditor();

  }

  const handleToolClick = (e) => {

    const element = e.currentTarget.value;

    setStyle(element);

    focusEditor();

  }

  const handleImgToolClick = () => {

    // 파일 선택 input을 클릭한다.

    imageSelectorRef.current.click();

  }

그렇다면 이제 각 함수들의 역할들을 살펴보자. 아래 설명에서 자세한 코드는 더보기로 확인하자.

* foucsEditor

  const focusEditor = () => {
    editorRef.current.focus({ preventScroll: true });
  };

여기서 editorRef.current.focus({ preventScroll: true });는 editorRef의 current 속성을 통해 실제 DOM 요소에 접근하고 focus() 메서드를 호출하여 해당 DOM 요소에 포커스를 설정한다. 이때 preventScroll: true 옵션을 사용하여 포커스를 설정할 때 스크롤을 방지한다. 즉, foucsEditor 툴이 적용되어 있는 함수들은 editorRef가 참조 되고 있는 contentEditable을 내포하고 있는 div태그에 모두 포커스가 된다는 것이다. 따라서 위의 모든 함수들이 동작하게 되면 해당 div로 포커스가 옮겨 진다는 것이다. 더 나아가 이것이 생성되는 단계를 거치게 된다면 배열과 같은 방식으로 진행이 될 것이다.

* setStyle

  function setStyle(style) {
    document.execCommand(style);
    focusEditor();
  }

이 코드는 document.execCommand() 함수를사용하여 지정된 스타일을 에디터 컴포넌트에 적용힌다. style 매개변수는 해당 스타일의 HTML문자열 식별자를 받는다. 예를 들어, 'bold', 'italic', 'underline' 등의 스타일이 될 수 있다. document.execCommand() 메서드는 브라우저가 기본적으로 제공하는 편집 동작을 실행시키는 함수로 이를 통해 사용자가 여러 스타일들을 변경하는 등의 작업을 수행할 수 있다. 다만 여기서 걸리는 것이 있다면 execCommad()는 공식문서 MDN에서 사용을 권장하지 않고 있다. 현재 이 부분 때문에 골치가 아프지만 해결 방안이 전혀 없는 것은 아니다. execCommand에 관해서는 자세한 내용은 따로 포스팅을 올려 놓도록 하겠다.

* handleToolClick

  const handleToolClick = (e) => {
    const element = e.currentTarget.value;
    console.log(element);
    setStyle(element);
    focusEditor();
  }

 handleToolClick 함수는 사용자가 편집 도구를 클릭했을 때 실행되는 이벤트 핸들러이다. 앞서 설명을 했지만 해당 버튼을 클릭을 했을 때 해당 버튼의 value값을 setStyle 함수의 매개변수로 넘겨주는 함수이다. 여기서 주목해야할 것은 이벤트를 처리한 방식인데 보통 e.target.value를 사용할 법하지만 이 코드에서는 e.currentTarget.value를 사용하게 되었다. 그 이유는 이벤트가 발생한 요소와 이벤트를 처리하는 요소가 동일한 경우에는 e.currentTarget과 e.target이 동일하게 동작하기 때문이다. 그러나 이벤트 버블링이 발생하는 경우에는 e.target이 실제 이벤트가 발생한 요소를 참조하지만 e.currentTarget은 항상 이벤트를 처리하는 요소로 참조한다. 즉, e.target은 클릭이나 마우스 이벤트에서는 사용자가 클릭한 요소를 가리키며 입력 필드에서는 사용자가 입력한 값이 있는 요소를 가리킨다. e.currentTarget은 이벤트를 현재 처리 중인 요소, 이벤트 핸들러가 실제로 연결된 요소를 가리키는 것이다. (설명이 조금 미흡하다고 생각 된다.)
따라서 조금 더 명시적으로 버튼들의 value 값을 구별 했기 때문에 currentTarget이 맞다고 판단되어 이렇게 코드를 작성하게 된것이다. 이벤트 버블링 무엇인지 알고 싶으면 아래 더보기를 확인하자.

## 이벤트 버블링 이란?

일반적으로 HTML 문서의 요소는 부모-자식 관계로 구성되어 있다. 이때 자식 요소에서 이벤트가 발생하면, 해당 이벤트는 자식 요소에서 상위로 올라가며 각 부모 요소로 전달된다. 이러한 이벤트 전파 과정을 이벤트 버블링이라고 한다. 간단한 예시를 들어보면 아래와 같은 HTML 구조가 있다고 가정해보자

<div id="parent">
    <div id="child">Click me!</div>
</div>

이때 #child 요소에 클릭 이벤트가 발생하면, 이벤트는 #child에서 시작해서 #parent로 전파된다. 이벤트 버블링은 DOM 트리의 상위 요소로 이벤트가 전파되는 과정을 의미한다. 즉, 자식안에서만 이벤트 핸들러가 발생되게 하고 싶지만 이벤트 버블링이 발생하게되면 부모까지 헨들링 하게 되는 피치 못하는 상황까지 도달 하게 되는 것이다.

 

* handleImgToolClick

  const imageSelectorRef = useRef(null); // 파일 선택 input 요소에 대한 참조
  ...
  const handleImgToolClick = () => {
    // 파일 선택 input을 클릭한다.
    imageSelectorRef.current.click();
  }

handleImgToolClick 함수는 이미지 도구를 클릭했을 때 파일 선택 input 요소를 클릭하여 사용자가 이미지를 선택할 수 있도록 하는 역할을 이다. 사용자가 이미지 도구를 클릭하면 파일 선택 input 요소가 자동으로 클릭되어 파일을 선택할 수 있는 창이 열리게 된다. 구체적으로 조금 더 설명 하자면 imageSelectorRef.current.click()는 imageSelectorRef라는 Ref 객체의 current 속성을 통해 현재 DOM 노드에 접근하고 그 DOM 노드의 click() 메서드를 호출한다. 이는 실제로 파일 선택 input 요소를 클릭하는 것과 같은 동작을 수행한다.

우선여기 까지가 기본 툴바들을 제작한 과정이다. 다음 포스팅에서는 이미지를 가져오는 부분을 다루어 볼 것이다.