(흥미) useRef로 input 대체하기

오?! 멋진데?

 

 

useRef는 React에서 제공하는 훅 중 하나로, 주로 두 가지 목적으로 사용된다. 

 

첫째, DOM 요소에 직접 접근할 때 사용되며, 둘째, 렌더링 사이에 데이터를 유지할 때 사용된다.

useRef는 .current프로퍼티에 변경 가능한 값을 보관하는 "상자"와 같은 객체를 반환한다. 이 값은 컴포넌트의 생명주기 동안 변경될 수 있으며, 값이 변경되어도 컴포넌트가 재랜더링되지 않는다.

 

좀 더 쉽게 이해하기 위해 좋은 비유는 "개인 금고"이다. 생각해보자. 금고 안에는 중요한 것을 넣어두고, 필요할 때마다 꺼내 쓸 수 있다. 그리고 금고 내용물을 바꿔도, 금고 자체의 위치나 존재에는 영향을 미치지 않는다. 이와 비슷하게, useRef는 React 컴포넌트에서 "금고" 역할을 한다. 

 

useRef의 기본 개념

* 금고 생성 : useRef를 호출할 때, React는 변경 가능한 "금고" 객체를 생성한다. 이 객체는 .current 프로퍼티를 가지고 있다. 이 .current 프로퍼티가 바로 값을 저장하는 곳이다.

const myRef = useRef(initialValue);

 

* 값 저장 : .current 프로퍼티에는 어떤 값이든 저장할 수 있다. 이 값은 컴포넌트의 라이프사이클이 동안 유지되며, 변경 가능하다. 이를 통해 금고 안에 중요한 물건(데이터)을 보관할 수 있다.

myRef.current = 42; // 금고 안에 값 저장

 

* 재렌더링 없음 : myRef.current의 값을 변경해도, 컴포넌트는 재렌더링되지 않는다. 금고 내용물을 바꿔도, 금고의 위치나 존재에 영향을 주지 않는 것처럼 말이다. 이는 useState와 다른 점이다. useState를 사용하여 상태를 변경하면, 그 변경 사항을 반영하기 위해 컴포넌트가 재렌더링된다.

 

DOM 요소 접근

useRef를 사용하여 DOM 요소에 직접 접근할 수 있다. 예를 들어, 특정 DOM 요소의 크기를 읽거나, 직접 입력 필드를 포커스하거나, 다른 DOM API를 사용해야 할 때 유용하다. 이는 ref 속성을 통해 DOM 요소에 대한 참조를 생성하고, 해당 참조를 통해 요소에 접근할 수 있게 해준다!

 

사용 예시

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `.current`는 입력 요소의 실제 DOM 노드를 가리킵니다.
    inputEl.current.focus();	// 입력 필드에 포커스
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

사용 예시

- input창에서 파일을 업로드하고 싶지 않고 위의 이미지 태그를 누르면 input창의 역할을 하도록 하고 싶음

 const fileInputRef = useRef(null);
 
 const triggerFileInput = () => {
      fileInputRef.current.click(); // 파일 입력 참조를 사용하여 클릭 이벤트 트리거
 };
 
  <div>	// 이미지 태그
   <FcAddImage
    className='w-full h-full'
    onClick={triggerFileInput}
   />
 </div>
 
 <form>
 <input
  type='file'
  ref={fileInputRef} // ref 속성으로 참조 연결
  style={{ display: 'none' }} // 입력 필드 숨기기
 />
 </form>