요번시간에는 useRef 에 대해서 알아보도록 하겠습니다.
useRef 는 두가지 기능이 있습니다.
먼저 첫번째 변수 관리에 대해서 알아보겠습니다.
React 개발을 하다보면 어떤 값을 저장하고 싶은데 state 에 관리하여 리 렌더링이 되는것이 아닌 값이 바뀌더라도 리 렌더링 되는것을 원하지 않을때가 있습니다. 이때 코드에서
const ref = useRef(value);를 사용해주면 됩니다. 위와 같은 코드를 작성하면 useRef 는 ref 라는 이름을 가진 객체를 반환 해 줍니다. 이 객체의 모습은 이렇습니다.
{ current : value}current 라는 프로퍼티에 useRef 에 전달한 인자를 저장해서 객체로 반환 합니다.
current 프로퍼티의 값을 컴포넌트 내부 코드에서 언제든 변경 할 수 있습니다. 하지만 ref 의 객체는 컴포넌트가 UnMount 될 때 까지 유지 됩니다.
그럼 그냥 컴포넌트 코드 내부 안에 let 을 사용해 변수를 선언하면 안되나? 라는 생각을 할 수도 있습니다.
state 가 바뀌면 컴포넌트는 리 렌더링 되기 때문에 일반 변수는 선언할때 초기화 했던 값으로 다시 초기화 됩니다.
하지만 useRef 를 사용한 변수는 값이 변경되도 리 렌더링이 되지 않고 state 변화로 인한 리 렌더링이 발생해도 변수의 값이 그대로 유지된다는 강력한 장점이 있습니다.
두번째는 Ref 를 통해서 실제 DOM 요소에 접근 할 수 있습니다. 대표적으로 사용자가 클릭하지 않아도 자동으로 input 요소에 focus 를 줄 수 있습니다.
실제 DOM 요소에 접근 방법은 접근하고 싶은 요소의 속성에 ref 를 적어주고 값으로 UseRef(value) 의 반환 객체를 넣어주면 됩니다. 코드로 보면
const Hello = () => {
const ref = useRef( );
useEffect(() => {
ref.current.focus();
}, []);
return (<>
<input type = "text" ref = {ref}/>
<button>로그인</button>
</>);
}위와 같이 input 요소의 ref 속성에 useRef 의 반환 객체를 받은 ref 변수를 넣으면 됩니다.
그럼 위와 같이 input 요소에 focus 가 되어 있는것을 확인 할 수 있습니다.
