React # useRef hook
📝오늘 배운 내용
오늘은 React에서 useRef hook에 대해 알아보자.
useRef는 아래 코드와 같이 사용한다.
const ref = useRef(value)함수형 컴포넌트에서 useRef를 부르면 ref object를 반환해준다. ref 오브젝트는 다음과 같다.
{ current:value } 여기서 인자로 넣어준 value값은 ref안에 있는 current 값에 저장이 된다. ref object는 수정이 가능하기 때문에 언제든 바꿔줄 수 있다.
{ current:"hi" }, { current:"hello" } 반환 된 ref는 컴포넌트에 전 생애주기를 통해 유지가 된다. 컴포넌트가 계속 렌더링 되어도 컴포넌트가 언마운트 되기전까지는 값을 유지할 수 있다.
useRef를 사용하는 두 가지 이유에 대해 알아보자.
- ref는 state와 비슷하게 어떠한 값을 저장해두는 저장공간으로 사용된다.
state의 변화 -> 렌더링 -> 컴포넌트 내부 변수들 초기화
state를 변경하면 자동으로 컴포넌트가 다시 rendering 된다. 함수형 컴포넌트는 말 그대로 함수이다.
rerendering 되면 함수가 다시 불려지는 것이기 때문에 내부에 있는 모든 변수들이 전부 다시 초기화된다. 그래서 우리는 가끔 원하지 않는 렌더링을 하게 되는 상황이 생기게 된다. 그렇다면 우리가 state 대신 ref안에 값을 저장해 두는 이유에 대해 알아보자.
- ref의 유용한 점은 우리가 ref안에 있는 값을 아무리 변경해도 컴포넌트는 다시 렌더링 되지 않는다는 점이다.
Ref의 변화 -> No 렌더링 -> 변수들의 값이 유지됨.
그래서 state 대신 ref를 사용하면 불필요한 렌더링을 막을 수 있게 된다. 또한, ref를 통해 DOM요소에 접근해서 여러가지 일들을 할 수 있다.
input 요소를 클릭하지 않아도 focus를 주고 싶을 때 많이 사용된다.
예를 들어, id를 입력하는 input 박스를 직접 클릭하지 않아도 focus가 되어 있게 해주면 바로 키보드를 사용해서 입력할 수 있게 해준다. 쉽게말해 Javasript의 document.querySelector와 같다고 생각하면 된다.
