useRef
const ref = useRef(value)- 함수형 컴포넌트에서 useRef를 부르면 ref 오브젝트를 반환해줌
- ref 오브젝트는 { current: value } 이렇게 생김
- 인자로 넣어준 초기값이 ref 안에 있는 current에 저장이 됨
- ref 오브젝트는 수정이 가능해서 언제든 원하는 값으로 변경 가능
const ref = uesRef('hi')
ref.current = 'hello'
ref.current = 'good day'- 반환된 ref는 컴포넌트의 전 생애 주기를 통해 유지가 됨
즉, 컴포넌트가 계속 렌더링 되어도 컴포넌트가 언마운트 되기 전까지는 값을 그대로 유지할 수 있음
useRef 이용 상황
- 저장공간
State의 변화 -> 렌더링 -> 컴포넌트 내부 변수들 초기화
Ref의 변화 -> No 렌더링 -> 변수들의 값이 유지됨
- State 대신 Ref를 사용하면 불필요한 렌더링을 막을 수 있음
- 변경시 렌더링을 발생시키지 말아야 하는 값을 다룰 때 편리함
- DOM 요소에 접근
- 요소에 접근해서 여러가지 일을 할 수 있음
- input 요소를 클릭하지 않아도 focus를 주고 싶을 때 많이 사용
ex) 로그인 화면이 보여졌을 때 id를 넣는 input을 클릭하지 않아도 자동적으로 focus가 되어있는 경우 - 바닐라 자바스크립트의 Document.querySelector()와 같은 기능
실제 코드 구현
-
State가 변경될 때마다 함수형 컴포넌트이기 때문에 UseRefHook이라는 함수가 다시 불려짐
-
useRef 추가해주기
-
Ref는 하나의 object고, current라는 값을 가지고 있고, current안에는 설정해준 기본값 0이 들어있음
Ref 안의 값에 접근을 하기 위해서는 countRef.current로 접근 해야 함
-
코드 수정 후 State 올려 버튼을 누르면 State가 올라가는 것을 확인할 수 있음
하지만, Ref 올려 버튼을 눌러도 Ref는 올라가지 않음
useState는 버튼을 누를 때마다 화면이 렌더링 되는 반면에 useRef는 버튼을 눌러도 화면이 렌더링 되지 않기 때문임
-
따라서 Ref 올려 버튼을 클릭한 후 State 올려 버튼을 클릭하면 화면이 렌더링 되면서 Ref도 증가함
정리
Ref의 장점
- 자주 바뀌는 값을 State 안에 넣어놓으면 값이 바뀔때마다 계속해서 렌더링 됨 -> 성능 저하
- 하지만 Ref를 사용하면 값이 바뀌더라도 렌더링을 발생시키지 않음 -> 성능 개선
컴포넌트 내의 변수와 Ref의 차이
- 코드를 위와 같이 작성하면 Ref의 변화, 변수의 변화 모두 렌더링을 발생시키지 않음
- 화면을 업데이트 해줄 State를 추가하기
-
Ref 올려 버튼과 Var 올려 버튼을 누른 후 렌더 버튼을 누르면 Ref만 증가함
-
렌더링 될때마다 함수가 다시 불리면서 함수 내부의 변수들이 초기화가 되기 때문임
(CountVar도 초기화 됨) -
하지만 Ref는 컴포넌트가 렌더링되더라도 계속 값을 유지함 -> 컴포넌트의 전생애주기를 통해 유지가 되기 때문임
-
즉, 컴포넌트가 브라우저에 마운팅 된 시점부터 마운트 해제 될 때까지 같은 값을 계속해서 유지할 수 있음
-
현재 Ref 안에 있는 값과 Var 변수 안에 있는 값을 출력해주는 함수 만들어보기
- Ref 올려 버튼 3번, Var 올려 버튼 3번 클릭 후 Ref Var 값 출력 버튼 클릭하면 Ref, Var 모두 3이 출력되는데 렌더 버튼을 누른 후 Ref Var 값 출력 버튼을 클릭하면 Var 값은 0으로 초기화 됨을 볼 수 있음
Ref가 유용한 상황
변화는 감지 해야 하지만 그 변화가 렌더링을 발생 시키면 안되는 값을 다루는 상황에서 사용하면 좋음
- 올려 버튼을 클릭할 때마다 콘솔에 렌더링이 몇 번 진행 되었는지 알고 싶어서 아래와 같은 코드를 작성하게 된다면 무한루프에 빠지게 됨
-
버튼을 클릭하면 count State가 업데이트 되기 때문에 useEffect가 불림 -> useEffect 안에도 renderCount State를 업데이트 시키는 코드가 있음 -> useEffect가 불림 -> renderCount State 업데이트 -> 무한 반복
-
Ref를 사용하면 해결 가능!
- 무한루프 없이 정상 작동함 -> Ref는 리렌더링을 발생시키지 않기 때문임
