TIL 79 | useState, useRef로 변수 관리

React 컴포넌트 내부에 어떤 값을 관리하고자할 때 사용할 수 있는 방법 3가지를 발견했다. 일반 변수 선언 방식, useState, useRef를 전부 적용해본 과정을 정리해둔다.

useRef는 DOM을 선택하여 값을 추출하는데 주로 사용되는 Hook이지만 컴포넌트 안에서 조회 및 수정 할 수 있는 변수를 관리하기도 용이하다.

문제

1. 방향키를 감지하여 리스트의 값을 선택하려 했다.
2. 보여지는 리스트의 맨 위, 아래에 도달하면 스크롤이 되어야 했다.
3. 스크롤 필요 시점을 판단하기 위한 변수가 필요했다.

해결 과정

로직 요약

최소값 0, 최대값은 5로 가질 수 있는 sequence라는 변수를 두어 이 값이 0이 되면 눈에 보이는 리스트 중 가장 위 값을 가리키고 있다고 판단하여 스크롤을 위로 이동시키고 값이 5가되면 가장 아래의 값을 가리키고 있다고 판단하여 스크로를 아래로 이동시킨다.

1. 일반 변수 선언

let을 이용해 변수를 선언하였고 selectedIndex가 변할 때마다 변수를 증감시킴.

• 문제점
  컴포넌트가 렌더링될 때 변수 선언 구문도 함께 리렌더링되므로 증감된 값이 반영되지 않고 매번 초기화 됨.

2. useState

상태를 저장할 때 흔히 사용하는 useState를 이용

• 문제점
  해당 값은 화면에 보여지는 값과 무관한데 useState는 값 변화시마다 리렌더링을 발생시키기 때문에 불필요한 리렌더링이 발생함.

3. useRef

const sequence = useRef(5); useRef를 이용해 변수를 선언한다. sequence.current += 1; 또는 sequence.current -= 1;를 이용하여 증감시킨 변수는 리렌더링 시에도 초기화되지않고 값을 유지할 수 있다.

useRef를 이용한 변수관리의 장점

• 상태를 바꾸는 함수를 호출하고 나서 그 다음 렌더링 이후로 업데이트 된 상태를 조회 할 수 있는 반면, useRef 로 관리하고 있는 변수는 설정 후 바로 조회가 가능하다. ex) .current
• 리렌더링이 이루어지지 않으므로 리렌더링이 필요하지 않은 변수의 경우 불필요한 리렌더링을 방지할 수 있다.

참고자료
https://react.vlpt.us/basic/12-variable-with-useRef.html
how-to-scroll-to-an-element-inside-a-div
useRef 사용법