React Hooks - useRef 정리

useRef 사용 예

함수형 컴포넌트 내부에서 useRef를 호출하면 ref  객체를 반환하고 그 모양은 { current : value } 처럼 생겼다.

고로 useState때와 같이 내부의 초기값인 value는 current의 값이 된다. ref 객체는 수정이 가능해서 아래와 같이

ref객체 수정

이처럼 반환된 ref는 컴포넌트 전생애주기를 통해 유지되고 컴포넌트가 계속 렌더링 되어도 unmount 되기 전까진 값을 유지할 수 있는 장점이 있다. 
useRef의 쓰임으로 크게 두가지가 있다. 1.저장공간(변수개념)  2.DOM요소에 접근(로그인 조건 포커스테두리 효과)

변수개념의 ref의 장점

DOM접근 예

1.저장공간(변수개념)

count를 올리면 렌더링이 다시되는지, 몇번되는지 세어주기 위한 renderCount State 이 있을때 count의 값을 올리는 button을 누르게되면 1이 오르면서 react의 리렌더링조건인 state가 변경될때에 해당되기 때문에 App이라는 함수가 재실행되면서 useEffect 가 실행되고 내부의 내용이 실행되는데 리렌더링 횟수를 세어주는 주체를 State로 설정해놨기 때문에 renderCount State의 상태를 또 변경하면 다시 App이 실행되고 useEffect가 실행되고 .... 아래와 같이 무한루프에 걸린다.

고로 컴포넌트 내에서 리렌더를 원하지 않고 값을 세어주고 싶을때는 useRef를 사용하면 된다!

2.DOM요소에 접근(로그인 조건 포커스테두리 효과)

위 그림과 같이 input요소의 DOM을 다루고 싶다면 ref속성으로 변수이름을 주면된다. 로그인 사이트에서 아이디나 비밀번호가 조건에 맞지않아 alert 로 알람을 주게되면 사용자에게 다소 좋지않은 느낌을 받기 때문에 테두리효과를 주는 focus를 줄수 있고 focus 설정이 되어있다면 키보드로 바로 입력가능하다는 장점이 있다.

 

참고자료 : https://www.youtube.com/watch?v=VxqZrL4FLz8 영상을 보며 블로깅했습니다. 좋은자료 감사합니다.