React(리액트): useRef로 컴포넌트 안의 변수 만들기

이번에는 useRef를 사용해서 컴포넌트 안의 변수를 만드는 방법을 알아보자.

여기서 말하는 변수는 예를 들어 컴포넌트 안에서 'let' 키워드를 사용해서 어떤 변수를 선언한다고 가정해보자.

 

이렇게 변수를 선언하면 다음 리 렌더링 될 때 그 변수 값은 초기화된다. 만약 계속 유지하고 싶은 값을 관리하려고 하면

이전에 공부했던 useState를 사용해야 하는데 useState 같은 경우는 상태를 바꾸게 되면 컴포넌트가 리 렌더링 된다.

하지만 우리는 가끔씩 어떤 값을 바꾸었을 때 굳이 리 렌더링 할 필요 없는 값을 관리하게 될 때도 있다.

그런 경우에는 useRef를 사용하면 된다. useRef는 이전에 우리가 특정 DOM을 선택해야 될 때  useRef라는 Hook을 

사용한다고 공부했다. 이것외에도 컴포넌트가 리 렌더링 될 때마다 계속 기억할 수 있는 값을 관리해야 할 때에도 

사용할 수가 있다.

 

주로 setTimeout, setInterval를 사용했을 때 주어지는 id의 값을 기억해야 될 때, 외부 라이브러리를 사용하여 생성 된

인스턴스를 담을 때, Scroll 위치를 알고 있어야 할 때 사용할 수 있다.

알아두어야 하는 것은 useRef로 관리하는 값은 바뀌어도 컴포넌트가 리 렌더링 되지 않는다는 점이다.

 

const nextId = useRef(4);

const onCreate = () => {
  	console.log(nextId.current);
  	nextId.current += 1;
  }

배열의 고유 id 값을 관리하기 위해 useRef를 사용하는 예시이다.

useRef()를 이용해서 nextId 변수를 4로 선언했다. nextId.current += 1 처럼 값을 바꿔주더라도 컴포넌트가 리 렌더링

되지 않는다.