DOM에 직접 접근하기 (useRef)

오늘은~! useRef에 대해 자세하게 공부해보자.

 

 

소분소분 프로젝트에서 회원가입을 담당했는데 정말 고민이 많았다.

 

실시간 유효성 검사하여 사용자에게 안내 메시지도 보여줘야 하고,

input 태그가 각자 리렌더링 되도록 해야하고... 허헣..

나름 신경써서 작업했는데 아쉽게도 라이트 하우스 90점을 넘지 못해 개선중이다.

 

일단 1차로 해결하고 싶은 부분은 리렌더링이다.

단순하게 컴포넌트를 상세하게 분류하거나, 아니면 커스텀 훅을 활용하거나 등등 여러가지 고민을 했지만 비밀번호 확인 때문에 쉽지가 않다.

 

사용자가 입력한 비밀번호와 일치하는지 확인하기 위해서는 같은 단에 선언해야 하는데.. 이 경우 하나만 변해도 다른 부분이 같이 리렌더링이 된다...

개선 전

 

일단 객체를 활용해서 그나마 리렌더링 덜 하게 바꾸긴 했지만... 아직 많이 부족한 상태이다. (왜냐하면 아직도 90점을 넘지 못했기 때문)

개선 후

객체를 사용해서 그나마 덜 하게 바꾸긴 했지만.. .아직 많이 부족한 상태이다.

 

이를 어떻게 해결하면 좋을 지 고민하다가~! useRef를 찾아보게 되었다.

비밀번호에 useRef를 걸어 놓고 비밀번호 확인할 때 DOM에 직접 접근해 값을 가져오는 방식을 고려중이다! ㅎㅎ

 

그 전에 useRef가 뭔지에 대해 다시 공부해보았다.

 

useRef

• 저장 공간 또는 DOM 요소에 접근하기 위해 사용되는 hook
• 마운트된 시점부터 언마운트된 시점까지 값을 유지

// 선언
const testRef = useRef("");

// 호출
testRef.current.focus(); // 포커스
// click: 버튼 클릭
// play: 동영상 실행


// 적용
return (
	<input ref={testRef} />
);

 

위에 배운 내용을 토대로 프로젝트에 적용해봐야겠다.