[React] React Hooks - useRef

React Hooks - useRef

• useRef란
  • 직접 DOM에 접근할 때 또는 값을 담을 때 사용
  • .current 프로퍼티로 전달된 인자로 초기화된 변경 가능한 ref 객체를 반환 (ref는 reference 참조!)
  • onChange와 같은 무거운 Event Handler를 사용하지 않아도 된다.
  • useRef를 이용하여 DOM에 접근하면 값이 변경되어도 불필요한 re-rendering을 하지 않는다. (state에 담으면 변경될 때마다 re-rendering)
• import
  • import { useRef } from ‘react;
• 변수 선언
  • const 변수명 = useRef(초기값);
  • useRef는 변수명에 초기값을 적는 식으로 생성한다.
  • {current: 초기값} 을 지닌 객체가 반환된다. 값 변경도 current를 이용하여 변경
• 변수 출력
  • 예시 <span ref={변수명}>
  • <input type='text' ref={변수명} />
  • <MyComponent ref={변수명} />
• 해당 DOM의 속성
  • 변수명.current.value
  • 변수명.current.focus()
• 예시
  • Login 예시

  import { FormEvent, useRef } from 'react';
  
  type Props = {
    login: (id: number, name: string) => void;
  };
  
  export const Login = ({ login }: Props) => {
  	// 변수 선언 
    const idRef = useRef<HTMLInputElement | null>(null);
    const nameRef = useRef<HTMLInputElement | null>(null);
  
    const makeLogin = (e: FormEvent<HTMLFormElement>) => {
      e.preventDefault(); // submit 기본 기능을 무력화!
  
      console.log(`makeLogin#${idRef.current?.value}#`);
  
      if (!idRef.current || !idRef.current.value) {
        alert('User ID를 입력하세요!');
        idRef.current?.focus();
        return;
      } else if (!nameRef.current?.value) {
        alert('User Name를 입력하세요!');
        idRef.current?.focus();
        return;
      }
  		
  		// 속성 
      const id = idRef.current.value;
      const name = nameRef.current.value;
  
      login(+id, name);
    };
  
    return (
      <>
        <form onSubmit={makeLogin}>
          <div>
            <span style={{ marginRight: '1em' }}>LoginID:</span>
            <input type='number' ref={idRef} />
          </div>
          <div>
            LoginName:
            {/* <input type='text' onChange={(e) => setName(e.currentTarget.value)} /> */}
            <input type='text' ref={nameRef}></input>
          </div>
          <button type='submit'>Sign-in</button>
        </form>
      </>
    );
  };