useRef

useRef는 두 가지 방식으로 쓰인다.

1) 특정 DOM을 선택할 때

2) 값이 바뀌어도 컴포넌트를 리렌더링 할 필요 없을 때, 그러한 상태들을 생성

useRef를 사용하려면 코드 맨 윗줄에 import React, { useRef } from 'react' ; 를 추가해야 한다.

 

1) 특정 DOM을 선택할 때.

Counter라는 함수 컴포넌트가 있고 이 컴포넌트는 특정 div의 text를 가져와서 1씩 증가시키는 역할이다.

아래와 같이 컴포넌트 안에 useRef를 이용해 변수를 생성하고,

function Counter (props) {

  const count = useRef(); 

}

 

선택을 원하는 DOM 안에서는 ref={변수명} 을 추가해준다.

<div ref={count}>0</div>

 

값의 변경을 원하는 함수 안에서는 변수명.current 다음에 원하는 행위를 작성한다.

function Counter (props) {

  const counter = useRef();

 

  const onIncrease = () => {

    count.current.innerText = parseInt(count.current.innerText) + 1;

  }

}

 

 

2) 값이 바뀌어도 컴포넌트를 리렌더링 할 필요 없을 때

useState로 상태 값 A가 생성되면 이 A가 바뀔 때마다 컴포넌트가 리렌더링되는데,

굳이 상태가 바뀌어도 컴포넌트를 리렌더링할 필요 없을 때가 있을 것이다.

그럴 때 사용하는 것이 useRef이다. 

count 값이 바뀌어도 그냥 내부에 가지고 있을 뿐 컴포넌트를 리렌더링 할 필요는 없다고 해보자. (사용자에게 보여줄 필요가 없을 때?)

 

function Counter (props) {

  const count = useRef(0);  // 0은 초기값

 

  const onCreate = () => {

    const.current += 1;
  }

}

 

1)과 마찬가지로 변수명.current 에 값을 작성해주면 된다.