react - useRef

오늘은 useRef를 알아보겠습니다잇!

1. 사용하게 된 계기

1-1. 무엇을 만드려고 했는가?

 

위에 보이는 것과 같이 signUp component를 구현하면서 있었던 일입니다!

사용자가 input을 입력하지 않고 건너뛰었을 때, 혹은 양식을 지키지 않았을때 등을 에러 상태라고 가정하고,

onBlur시 각 에러에 해당하는 상황이라면 에러에 해당하는 에러 메세지를 보여주면서

에러의 타입과는 상관없이 모든 에러에는 경고를 위한 style을 적용하고 싶었습니다!

 

그래서... 에러상태에 보여줄 style은 미리 만들어 두고,

각 form에 해당하는 DOM을 선택해서 classList에 '.errored' 라는 class명을 추가시켜 동작시키려고 했습니다!

 

---

2.  useRef로 DOM 선택하기!

2-1. 사용법

useRef hook을 활용하면 손쉽게 DOM을 선택할 수 있습니다!

기본적인 사용법은 다음과 같습니다!

 

1. useRef로 Ref객체 만들기.

 

2. 선택하고 싶은 DOM의 ref 속성 값으로 Ref 객체 설정.

 

3. Ref객체.current 로 사용합니다.

---

2-2. 이렇게도 가능하다고?

인자를 전달해서 .current의 초기값을 정할 수 있습니다.

저의 경우 4개의 input의 대한 ref를 1개의 객체에 전부 담기 위해서 파라미터로 객체를 전달했습니다.

 

 

이후 원하는 DOM의 ref 속성 값으로 다음과 같이 설정했습니다.

ref 인자는 해당 DOM을 가리킵니다.

current 객체에 변수명 - ref 의 형태의 프로퍼티를 추가했습니다.

( 2개의 input이 1개의 ref를(email form) 가리켜야 해서 위와 같이 작성했습니다! )

 

input 4개에 대한 DOM이 잘 선택되어 담겨있는 것을 확인할 수 있습니다.

 

이제 원하는 대로 class를 추가하거나 제거할 수 있습니다!

---

3. useRef로 조회, 수정이 가능한 변수 관리하기!

useRef 의 또 다른 사용법은 변수 관리입니다.

useState와는 다르게,

useRef 로 관리하는 변수는 값이 수정되어도 컴포넌트가 리렌더링 되지 않습니다!

 

 

이러한 원리를 사용하면,

첫 렌더시 useEffect hook의 실행을 막는

isMounted 와 같은 변수를 만들어 useRef로 관리해 볼 수 있겠네요 ~