useRef 로 컴포넌트 안의 변수 만들기

useRef 역할

1. DOM을 선택하는 용도
2. 컴포넌트 안에서 조회 및 수정할 수 있는 변수를 관리

 

useRef 로 관리되는 변수는 값이 바뀌어도 컴포넌트가 리렌더링 되지 않는다.

변수를 사용하여 관리할 수 있는 값

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

 

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

useRef( ) 를 사용할 때 파라미터를 넣어주면 이 값이 .current 값의 기본값이 된다.

+원문 댓글 추가

리액트 컴포넌트 setState 를 통해서 값이 변경될 경우 값이 변경된 시점 후 부터 리렌더링 전까지 state 에 접근하여 값 변경이 가능하다.

리렌더링이 일어나 변경한 값을 화면에서 확인할 수 있지만 리렌더링이 일어나기 전의 시점까지는 값이 바뀌더라도 화면에서 그 값을 바로 확인할 수 없다.

 

예시) 채팅창의 스크롤

우리가 채팅을 입력하면 함수 컴포넌트를 재호출하게 될 때 스크롤을 움직이게 되면 스크롤의 state 값이 변하게 되는데 값이 변하면 리렌더링이 일어나니 계속해서 리렌더링이 일어난다.

이를 useRef 를 사용하여 동일한 참조값을 유지한다면 스크롤의 상태에 관계없이 리렌더링은 일어나지 않는다.

 

예시) 새로운 항목을 만들 때마다 nextId 의 4라는 값을 1씩 더해주도록 바꾸고 싶다.

const nextId = useRef(4);

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

함수가 호출될 때마다 nextId.current 를 사용한 후 +=1 을 통해 기존값에 1을 더해주는 작업을 실행한다.