useRef

attosisss_·2022년 4월 8일
0

리액트를 사용하기 전까지 우리는 특정 태그에 접근할 때 document.getElementById()를 사용했었다.

하지만 리액트는 실제 돔이 아닌 virtual DOM을 다루기 때문에 위의 방법으로 접근했을 때 문제가 생길 수 있으므로 Ref를 이용해 태그르 직접 변수에 저장하도록 하겠습니당

useRef는 리렌더링 하지 않는다. 컴포넌트이 속성만 조회 & 수정한다.

class형 컴포넌트 createRef()

class형 컴포넌트에는 createRef() 메서드를 이용해 특정 태그에 접근한다.

//메서드 임폴트
import {createRef} from 'react'

// Ref코드 생성
inputRef = createRef()

// Ref를 적용하고싶은 input태그(=접근하고싶은 태그)
<input type="text" ref={this.inputRef}/>

//태그에 접근해서 실행시킬 함수
componentDidMout(){
		console.log("마운트 됨")
		this.inputRef.current?.focus()
	}

함수형 컴포넌트 useRef()

함수형 컴포넌트에는 useRef 훅을 이요해 특정 태그에 접근한다.

// 훅 임폴트
import {useRef} from 'react'

//Ref코드 생성
const inputRef = useRef()

// Ref를 적용하고 싶은 input태그(=접근하고 싶은 태그)
<input type="text" ref={inputRef}/>

//태그에 접근해서 실행시킬 함수 _ useEffect참고는 바로 아래에서!
useEffect(()=>{
		console.log("마운트 됨")
		inputRef.current?.focus()
	})

useRef는 언제 사용할까 ?

1. 특정 DOM 선택하기

JavaScript 를 사용할 때는, 특정 DOM 을 선택해야 하는 상황에 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM 을 선택한다.

리액트에서는 DOM 을 선택할 때 ref 를 사용한다. 함수형 컴포넌트에서 ref 를 사용할 때는 useRef 라는 Hook 함수를 사용하고 클래스형 컴포넌트에서는 콜백 함수를 사용하거나 React.createRef 라는 함수를 사용한다.

이 글에서는 함수형 컴포넌트의 useRef를 사용한다.

2.컴포넌트 안의 변수 만들기

useRef 로 관리하는 변수는 값이 바뀐다고 해서 컴포넌트가 리렌더링되지 않는다. 리액트 컴포넌트에서의 상태는 상태를 바꾸는 함수를 호출하고 나서 그다음 렌더링 이후로 업데이트된 상태를 조회할 수 있지만, useRef 로 관리하는 변수는 설정 후 바로 조회할 수 있다.

이 변수를 사용하여 다음과 같은 값을 관리할 수 있다.

  • setTimeout, setInterval을 통해서 만들어진 id
  • 외부 라이브러리를 사용하여 생성된 인스턴스
  • scroll위치

3. 리렌더링 방지

컴포넌트가 렌더링 된다는 것은 함수(컴포넌트)를 호출하여 실행되는 것을 말한다. 함수가 실행될 때마다 내부에 선언되어 있던 표현식(변수나 또 다른 함수 등)도 매번 다시 선언되어 사용한다.

컴포넌트는 자신의 state가 변경되거나, 부모에게서 받는 props가 변경되었을 때마다 리렌더링 된다.

심지어 하위 컴포넌트에 최적화 설정을 해주지 않으면 부모에게서 받는 props가 변경되지 않았더라도 리렌더링 된다.

useRef 로 관리하는 변수는 값이 바뀐다고 해서 컴포넌트가 리렌더링되지 않으므로 리렌더링 방지에 활용할 수 있.

0개의 댓글