230926 개발일지 TIL - React에서 useRef를 사용하여 DOM 요소 접근

전체 코드

import React, { useEffect, useState } from 'react';
import { Col, Modal, Row } from 'antd';
const Theme = () => {
  // 테마(배경 이미지 업로드)시 input
  const handleCustomBackgroundClick = () => {
    const imageInput = document.getElementById('image-upload'); // useRef로 변경
    imageInput.click();
    imageInput.value = null;
    setTempTheme('light');
  };

  return (
    <>
      <Modal
        title={<T.ModalTitle>테마 설정</T.ModalTitle>}
        centered
        open={modalVisible}
        onCancel={() => setModalVisible(false)}
        footer={null}
        width={350}
      >
        <T.Description>
          테마를 선택하신 후 적용하기 버튼을 눌러주세요.
        </T.Description>
        <Row justify="center">
          <Col span={24}>
            <T.ButtonRow>
              <T.ButtonColumn>
                {/* 이미지 업로드 */}
                <div>
                  <T.SelectImageButton
                    onClick={handleCustomBackgroundClick}
                  ></T.SelectImageButton>
                  <p>이미지 업로드</p>
                  {/* 파일 업로드 */}
                  <T.HiddenInput
                    id="image-upload"
                    type="file"
                    accept=".jpg,.jpeg,.png"
                    style={{ display: 'none' }}
                    onChange={onImageChange}
                  />
                </div>
              </T.ButtonColumn>
          </Col>
        </Row>
      </Modal>
    </>
  );
};

export default Theme;

아래 코드를 useRef로 수정

const handleCustomBackgroundClick = () => {
    const imageInput = document.getElementById('image-upload'); // useRef로 변경
    imageInput.click();
    imageInput.value = null;
    setTempTheme('light');
  };

수정 된 코드

import React, { useEffect, useState, useRef } from 'react';

const Theme = () => {
  const imageInputRef = useRef(null);

  const handleCustomBackgroundClick = () => {
    const imageInput = imageInputRef.current;
    
    if (imageInput) { 
      imageInput.click();
      imageInput.value = null;
    }
    
    setTempTheme('light');
  };

  return (
    <T.HiddenInput
      ref={imageInputRef}
      id="image-upload"
      type="file"
      accept=".jpg,.jpeg,.png"
      style={{ display: 'none' }}
      onChange={onImageChange}
    />
  );
};

export default Theme;

먼저 useRef() Hook을 호출하여 참조 객체인 imageInputRef를 생성한다. 그리고 이 참조 객체를 파일 입력 요소의 ref prop에 연결한다. 그러면 참조 객체인 imageInput.current 을 통해 해당 입력요소(DOM) 에 직접적으로 접근할 수 있게 된다.

결론 및 useRef 개념 정리

React에서 안전하게 DOM 요소에 접근하기 위해서는 useRef Hook을 사용하는 것이 권장된다.
useRef는 React의 Hook 중 하나로, 변경 가능한 ref 객체를 생성한다. 이 ref 객체의 .current 프로퍼티를 통해 같은 값을 계속 유지할 수 있다. 주로 DOM 요소에 접근하거나, 컴포넌트의 라이프 사이클 동안 유지되어야 하는 변수를 저장하는 데 사용된다.