13. <Hook : useRef> useRef로 컴포넌트 안의 변수 만들기

이 문서는 fastcampus 강의 를 듣고 정리한 문서입니다. 문제가 있을 경우 s26788761@naver.com 으로 문의주세요! 😀

이번에는 이전 시간에 배운 useRef를 활용해 컴포넌트 안에 변수를 만드는 법에 대해 설명

만약 컴포넌트 안에서 let 키워드를 사용하여 변수를 선언하면, 해당 컴포넌트가 생성될 때마다 해당 변수는 해당 값으로 계속 선언됨.
(다음에 리렌더링되어도 값이 초기화 됨)

그럼 값을 유지시키고 싶으면 전에 배운 useState를 써야 하는데,
useState를 통해 값을 변화시키면(상태를 변화),
변화시킬때마다 컴포넌트가 리렌더링됨.

만약 저장하는 값이 렌더링이랑 상관없는 값이면 값이 변화될 때마다 리렌더링 되는 방법은 비효율 적인 방법임.

이때 우리는 useRef 함수를 쓸 수 있는데, 컴포넌트가 리렌더링 될 때도 계속 값을 저장해야할 때 쓴다!

• setTimeout/setInterval의 id 값 저장할 때
• 외부 라이브러리를 사용하여 생성된 인스턴스를 저장할 때
• Scroll 위치
• ...

여기서 포인트는 useRef 로 저장하고 관리하는 값은 값이 변하더라고 컴포넌트가 리렌더링 되지 않는다는 거!!!

이전에 활용한 예제에 새로운 항목을 추가할 때, id값을 받아오기 위해 변수를 useRef 함수를 사용하여 저장할 것.

import React, { useRef } from 'react';

와 같이 useRef 함수를 불러온 다음,

const nextId = useRef(4); //초기값을 4로 설정

초기값 4를 nextId 에 저장

그리고 그 값을 사용할때는

const onCreate = () => { //새로운 원소를 추가하는 함수

  console.log(nextId.current);
  nextId.current += 1; //기존 값에 1 추가
}

이렇게 사용하면 된다.

포인트! 는
useRef 함수를 사용하여 컴포넌트 안의 변수를 만들면,
컴포넌트에 값을 저장할 수 있고,
값이 변경된다 하더라도 컴포넌트가 리랜더링 되진 않는다.