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

 

  const [imageFiles, setImageFiles] = useState([]); // 이미지 파일들을 저장할 배열 상태

  const [imageUrl, setImageUrl] = useState([]);

 

   ...

 

// 에디터가 업데이트될 때 이미지 삽입

  useEffect(() => {

    if (editorRef.current && imageFiles.length > 0) {

      const file = imageFiles[imageFiles.length - 1];

      insertImageDate(file);

    }

  }, [editorRef.current, imageFiles]);

  const handleImageSelect = (e) => {

    const files = e.target.files;

    if (!!files && files.length > 0) {

      const file = files[0];//?

      // 이미지 파일 배열에 추가

      setImageFiles([...imageFiles, file]);

      handleSave();

    }

  };

  //이미지를 삽입하고 렌더링하는 함수

  const insertImageDate = (file) => {

    const reader = new FileReader();

    reader.onload = function (e) {

      const imageDataUrl = e.target.result;

      // 이미지를 삽입합니다.

      const imgElement = document.createElement('img');

      imgElement.src = imageDataUrl;

      setImageUrl([...imageUrl, imgElement.src]);

      // editorRef가 null이 아닌 경우에만 이미지를 삽입합니다.

      if (editorRef.current) {

        editorRef.current.appendChild(imgElement);

      } else {

        console.error("Editor reference is null.");

      }

    };

    reader.readAsDataURL(file);

  };

---

* handleImageSelect

위의 코드는 이미지를 선택하고 파일이 선택되면 해당 파일을 이미지 파일 배열에 추가하고 handleSave 함수를 호출하는 역할을 한다.

 

  const handleImageSelect = (e) => {

    const files = e.target.files;

    if (!!files && files.length > 0) {

      const file = files[0];//?

      // 이미지 파일 배열에 추가

      setImageFiles([...imageFiles, file]);

      handleSave();

    }

  };

 

파일 선택 <input> 요소를 클릭하여 파일을 선택하는 작업을 수행하게 되면 파일 선택 이벤트가 발생하고 handleImageSelect 함수가 호출된다.

 

  <input

  type="file"

  accept="image/*"

  style={{ display: 'none' }}

  ref={imageSelectorRef}

  onChange={handleImageSelect}

/>

 

 

* const files = e.target.files;

e.target.files를 통해 사용자가 선택한 파일 목록에 접근을 한다.

* if (!!files && files.length > 0) {...}

선택된 파일이 존재하는지 여부를 확인하기 위해 !!files를 사용한다. 이것은 선택된 파일이 존재하면 true를 반환하고, 그렇지 않으면 false를 반환한다. 선택된 파일이 존재하고 파일 목록의 길이가 0보다 큰지 확인한다.

* const file = files[0];

files[0]을 통해 파일 목록에서 첫 번째 파일을 가져온다. 이것은 단일 파일 선택을 가정한다.

* setImageFiles([...imageFiles, file]);

이미지 파일 배열에 현재 파일을 추가하기 위해 spread 연산자 ...를 사용하여 이전 이미지 파일 배열과 새로운 파일을 병합한다.

* handleSave();

마지막으로 handleSave 함수를 호출하여 변경된 이미지 파일 배열을 저장한다.

---

* insertImageDate

위의 코드는 이미지 파일을 읽고 이미지를 삽입하고 렌더링하는 함수이다. 

 

 //이미지를 삽입하고 렌더링하는 함수

  const insertImageDate = (file) => {

    const reader = new FileReader();

    reader.onload = function (e) {

      const imageDataUrl = e.target.result;

      // 이미지를 삽입합니다.

      const imgElement = document.createElement('img');

      imgElement.src = imageDataUrl;

      setImageUrl([...imageUrl, imgElement.src]);

      // editorRef가 null이 아닌 경우에만 이미지를 삽입합니다.

      if (editorRef.current) {

        editorRef.current.appendChild(imgElement);

      } else {

        console.error("Editor reference is null.");

      }

    };

    reader.readAsDataURL(file);

  };

 

 

* const insertImageDate = (file) => { const reader = new FileReader(); ...}

insertImageDate 함수는 파일을 매개변수로 받는다. 이 파일은 이미지 파일이다. 함수가 호출되면, FileReader 객체를 생성합한다. 이 객체는 파일을 비동기적으로 읽기 위해 사용된다.

* reader.onload = function (e) { const imageDataUrl = e.target.result; ...}

FileReader 객체의 onload 이벤트 핸들러를 설정한다. 파일의 로딩이 완료되면 해당 이벤트 핸들러가 호출된다. 이벤트 핸들러 내에서는 FileReader의 result 속성을 통해 읽은 파일의 데이터 url을 가져온다. 데이터 url은 파일의 내용을 나타내는 url이다.

* const imgElement = document.createElement('img');
      imgElement.src = imageDataUrl;
      setImageUrl([...imageUrl, imgElement.src]);

가져온 데이터의 url을 사용하여 <img> 요소를 생성하고 이 <img> 요소의 src 속성에 데이터 url을 설정한다. 새로운 이미지 url을 이미지 url 배열에 추가한다. 이 배열은 이미지 url들을 추적하기 위해 사용된다.

*  if (editorRef.current) {
        editorRef.current.appendChild(imgElement);
      } else {
        console.error("Editor reference is null.");
      }

만약 editorRef가 null이 아니라면 이미지를 삽입할 편집기 요소에 이미지를 추가한다. 이를 위해 생성된 <img> 요소를 해당 편집기 요소에 추가한다. 만약 editorRef가 null이라면 콘솔에 "Editor reference is null."이라는 에러 메시지를 출력한다.

---

* useEffect(()=>...)

위의 코드는 useEffect 훅을 사용하여 편집기가 업데이트될 때 이미지를 삽입하는 역할을 한다.

 

// 에디터가 업데이트될 때 이미지 삽입

 useEffect(() => {

  if (editorRef.current && imageFiles.length > 0) {

    const file = imageFiles[imageFiles.length - 1];

    insertImageDate(file);

  }

 }, [editorRef.current, imageFiles]);

 

useEffect 훅은 함수를 컴포넌트의 렌더링 결과물이 화면에 반영된 후에 실행시킨다. 의존성 배열에 있는 값들 중 하나라도 변경될 때마다 효과 함수가 다시 실행된다. 여기서 의존성 배열에는 editorRef.current와 imageFiles가 있다.

* if (editorRef.current && imageFiles.length > 0) {...}

editorRef.current가 존재하고, imageFiles 배열의 길이가 0보다 큰 경우에만 조건문이 실행된다.

* const file = imageFiles[imageFiles.length - 1];

조건문 내에서는 imageFiles 배열에서 가장 최근에 추가된 이미지 파일을 가져온다. 가져온 파일을 insertImageDate 함수를 호출하여 이미지를 삽입하는데 사용한다.

즉, 전체적으로 흐름을 살펴보면 handleImageSelect가 선택이 되고 useEffect가 의존하고 있는 의존성 배열인 imageFiles의 상태값이 변경되면서 useEffect가 업데이트가 되면서 insertImageDate로 이미지가 업로드가 되면서 appendChild를 통해 editorRef에 생성된 이미지를 삽입하고 입력란의 div에 이미지가 완성이 되는 것이다.