React Hooks - useRef

1. 저장공간

함수형 컴포넌트에서 useref를 부르면 ref 오브젝트를 반환해 준다.

const ref = useRef(value)

ref 오브젝트는 이렇게 생겼다.

{current: value}

인자로 넣어준 초기 값은 ref 안에 있는 current에 저장된다.

ref 오브젝트는 수정이 가능하기 때문에 언제든 원하는 값으로 바꿀 수 있다.

{current: "hi"} // const ref = useRef("h1")
{current: "hello"} // ref.current ="hello"
{current: "nice"} // ref.current = "nice"

반환된 ref는 컴포넌트의 전 생애주기를 통해 유지된다.

컴포넌트가 계속해서 렌더링이 되어도 컴포넌트가 언마운트되기 전까지는 값을 그대로 유지할 수 있다.

 

useref가 유용한 상황

1) ref는 state와 비슷하게 어떤 값을 저장해두는 저장공간으로 사용된다.

• State의 변화 → 렌더링 → 컴포넌트 내부 변수들 초기화
  • state를 변경하면 자동으로 컴포넌트가 다시 렌더링이 된다.
  • 함수형 컴포넌트는 말 그대로 함수이다.
  • 그래서 리렌더링이 되면 함수가 다시 불려지기 때문에 내부에 있는 모든 변수들이 모두 다시 초기화 되버린다.
  • 그렇기 때문에 가끔 원하지 않는 렌더링 때문에 곤란해질 때가 있다.

state 대신 ref안에 값을 저장해두면 생기는 장점

• Ref의 변화 → No 렌더링 → 변수들의 값이 유지됨
  • ref안에 있는 값을 아무리 변경해도 컴포넌트는 다시 렌더링 되지 않는다.
  • state 대신 ref를 사용한다면 불필요한 렌더링을 막을 수 있다.
• State의 변화 → 렌더링 → 그래도 Ref의 값은 유지됨
  • 또한 컴포넌트가 아무리 렌더링이 되어도 ref 안에 저장되어 있는 값은 변화되지 않고 그대로 유지가 된다.
  • 그렇기 때문에 변경 시 렌더링을 발생시키지 말아야 하는 값을 다룰 때 편리하다.

2) ref를 통해 실제적으로 DOM 요소에 접근해서 여러가지 일들을 할 수 있다.

대표적으로 input 요소를 클릭하지 않아도 포커스를 주고싶을 때 많이 사용된다.

예를 들어 로그인 화면이 보여졌을 때 id를 넣는 input을 굳이 클릭하지 않아도 자동적으로 focus가 되어 있게 해주면 바로 키보드를 사용해서 아이디를 입력할 수 있기 때문에 편리하다.

ref를 사용하면 손쉽게 input요소에 접근을 해서 이런 작업을 해줄 수 있다.

마치 바닐라자바스크립트의 Document.querySelector() 같다.

 

2. DOM 요소 접근

useRef를 부르면 ref 오브젝트를 반환한다. 이 오브젝트를 접근하고자하는 태그의 ref 속성으로 넣어주면 쉽게 해당요소에 접근할 수 있다. 대표적인 사용법으로는 텍스트박스 같은 input  요소에 focus를 줄 때 많이 사용된다. 예를들어 로그인 페이지가 로딩 되어서 화면에 보여졌을 때 id를 넣는 공간에 굳이 클릭하지 않아도 자동적으로 포커스가 되어 있게 해주면 바로 키보드를 쳐서 id를 입력할 수 있으므로 편리하다. ref를 사용하면 DOM 요소에 접근해서 이런 작업을 해줄 수 있다. 마치 바닐라자바스크립트의 Document.querySelector() 같다.