useRef?

• 렌더링 작업 없이 값을 기억하고자 할때 사용
• DOM 요소를 참조하기 위해 자주 사용

const 변수 = useRef<타입>(초기값)

-> 매번 호출을 해야하기 때문에 불편, React에서는 React DOM을 사용하기 때문에 일반적인 DOM같은경우는 안정성이 떨어질 가능성이 있다.

const onButtonClickHandler = () => {
	const inputElement = document.getElementById('input');
	inputElement?.focus(); //inputElement null 값이 아니면 포커스 작업을 해라
}

useRef 이용

• DOM 요소를 참조하기 위해 useRef 사용할 경우 참조할 요소의 ref 속성에 참조변수를 지정해야함
• inputRef.current?.focus(); useRef로 생성한 참조 객체는 해당 변수의 current 속성에 들어있다.
• 특정 객체에서 속성 및 메서드를 호출 하려할 때 변수의 값이 null 혹은 undefined가 아닌 상태에서만 작업을 수행하도록 하려면 변수?속성 혹은 변수?.메서드()로 지정

Ex1) focus를 눌렀을 경우 해당 input에 포커스가 맞춰짐

import React from 'react'

export default function HookComponent2() {

	const inputRef = useRef<HTMLInputElement>(null);
	
	const onButtonClickHandler = () => {
		//inputRef.current?.focus(); ->안정성은 떨어진다.

		//밑에 코드 처럼 직접적으로 명시 하는 방법이 좋다.
		if(!inputRef.current) return; 
		inputRef.current.focus();

	}

	return (
		<div>
			<input ref={inputRef} id='input' />
			<button onClick={onButtonClickHandler}>focus</button>
		</div>
	)
}

Ex2) 이미지를 첨부하여 이미지를 화면에 표시하는 예제

export default function HookComponent2() {
	const inputRef = useRef<HTMLInputElement>(null);
	const imageInputRef = useRef<HTMLInputElement>(null);
	const [imageUrl, setImageUrl] = useState<string>('');
	
	const onImageInputChangeHandler = () => {
		const {current} = imageInputRef;
		if(!current) return;
		if(!current.files) return;
		const file = current.files[0];
		const fileReader = new FileReader();
		fileReader.readAsDataURL(file);
		fileReader.onloadend = () => {
			setImageUrl(fileReader.result as string);
		};
	};

	const onImageButtonClickHandler = () => {
		const {current} = imageInputRef;
		if(!current)return;
		current.click();
	};
	
	return (
		<div>
			<img src={imageUrl}/>
			<input ref={imageInputRef} type="file" accept='image/*' onChange={onImageInputChangeHandler}/>
			<button onClick={onImageButtonClickHandler}>이미지 등록</button>
		</div>
	)
}