useRef 사용 방법

useRef()는 인자로 받은 값으로 초기화된 변경 가능한 ref 객체를 반환합니다. 이 객체는 컴포넌트의 전 생애주기동안 유지되며, ref.current와 같이 current 속성에 접근하여 현재 가리키는 객체에 접근할 수 있습니다.

select Tag에 useRef를 이용하여 props 데이터가 바뀔 때마다 select의 selectedIndex를 초기화 시키는 작업을 진행하였습니다.

    const presetRef = useRef(null); // select tag 상태 감시 변수

    useEffect(() => { // props 데이터가 바뀌면 동작
      if(presetRef.current) // 초기에는 값이 없으므로 값이 들어있는지 확인
      {
        presetRef.current.selectedIndex = 0 // 선택된 option의 index를 초기값인 0으로 변경
      }
    }, [props.receive_data, presetRef]) // props 데이터 및 ref 감시

이런 식으로 JSX Tag에 ref를 이용하여 Tag 상태에 접근하여 상태 값을 변경시킬 수 있습니다.

<select ref={presetRef}> {option_rendering()} </select>      

select Tag에는 다음과 같이 ref를 등록할 수 있습니다.