ref로 DOM 노드 가져오기

ref로 DOM 노드 가져오기 
: 렌더링이 끝날 때 생기니까 current 값이 있을 경우 사용 할 것 

 

import { useEffect, useRef } from 'react';

function FileInput({ name, value, onChange }) {
  const inputRef = useRef();

  const handleChange = (e) => {
    const nextValue = e.target.files[0];
    onChange(name, nextValue);
  };

  useEffect(() => {
    if (inputRef.current) { // 조건 써줄 것 
      console.log(inputRef);
    }
  }, []);

  return <input type="file" onChange={handleChange} ref={inputRef} />;
}

export default FileInput;

 

 

1. Ref 객체 생성
: useRef 함수로 Ref 객체를 만들 수 있다.

 

import { useRef } from 'react';

// ...

const ref = useRef();

 

2. ref Prop 사용하기 
: ref Prop에다가 앞에서 만든 Ref 객체를 내려준다.

 

const ref = useRef();

// ...

<div ref={ref}> ... </div>

 

3. Ref 객체에서 DOM 노드 참조하기
: Ref 객체의 current 라는 프로퍼티를 사용하면 DOM 노드를 참조할 수 있다.

 

const node = ref.current;
if (node) {
  // node 를 사용하는 코드
}

- current 값은 없을 수도 있으니까 반드시 값이 존재하는지 검사하고 사용하자