9.1.3_UseRef의 여러가지 특성

[Stilllee]

📝 p299

❓ UseRef의 여러가지 특성

본문에서는 useRef가 자식 컴포넌트를 저장하는 변수로 활용할 수 있을 뿐만 아니라 다른 방식으로도 유용하게 사용할 수 있다고 하였습니다.

어떤 방식으로 사용할 수 있는지 답변해주세요.

[eeeyooon]

본문에서 언급된 useRef의 특성으로는 다음과 같습니다.

1️⃣ 변경 가능한 데이터 저장 useRef로 관리되는 변수는 값이 바뀌어도 컴포넌트의 리렌더링을 유발하지 않습니다. 예를 들어 타이머, 스크롤 위치 등 리렌더링없이 컴포넌트 내부에서 변경되는 값을 저장하는 데에 useRef를 활용할 수 있습니다. useRef는 컴포넌트의 리렌더링을 유발하지 않는 변경 가능한 데이터를 저장하는데 유용합니다.

2️⃣ 즉시 조회 가능 리액트의 일반적인 상태 관리와는 달리 useRef로 관리되는 변수는 값을 설정한 후 즉시 조회할 수 있습니다. 일반적인 상태 관리에서는 상태 변경 함수를 호출한 후 다음 렌더링 이후에 업데이트된 상태를 조회할 수 있지만 useRef를 사용하면 상태 변경과 동시에 변경된 값을 즉시 조회할 수 있어, 특정 로직을 동기적으로 처리해야할 때 유용합니다.

그러므로 useRef는 계속 변경이 일어나는 데이터를 사용해야 하지만 변경 때마다 리렌더링이 발생하지 않길 원할 때나 상태 변경과 동시에 변경된 값을 즉시 조회해야 하는 상황에서 유용하게 사용할 수 있습니다.

[lulla-by]

1. 불필요한 리렌더링 방지 useRef()로 관리되는 변수는 값이 바뀌어도 리렌더링이 발생하지 않습니다. 이를 통해 불필요한 리렌더링을 피할 수 있습니다.

2. 업데이트 이후 즉시 조회 가능 리액트의 state는 변경된 이후 렌더링이 발생해야 업데이트 된 상태를 조회할 수 있습니다. 반면 useRef로 관리되는 변수는 값이 바뀌어도 리렌더링이 발생하지 않고 바로 조회가 가능합니다.

[sryung1225]

1️⃣ (기본 특성) 자식 컴포넌트를 저장하는 변수로 활용하기 useRef를 이용해 DOM을 직접 선택해 변수로 저장하고 전달할 수 있습니다. 기본 HTML 요소 뿐만 아니라 리액트 컴포넌트도 이에 해당합니다.

2️⃣ 컴포넌트의 불필요한 렌더링 줄이기 useRef로 관리되는 변수는 값이 바뀌어도 컴포넌트의 리렌더링이 발생하지 않습니다. 때문에 상태가 변경되더라도 불필요한 렌더링이 생기는 것을 피할 수 있게 됩니다.

3️⃣ 변경되는 값을 즉시 조회하기 useRef로 관리되는 변수는 값을 설정한 후 즉시 조회할 수 있습니다. 이 점은 상태 변경 함수를 호출하고 렌더링 이후에 업데이트된 상태를 조회할 수 있는 리액트 컴포넌트의 state와 차이가 됩니다.

[Stilllee]

리렌더링 방지

useState나 useReducer와 같은 상태 관리 훅을 사용할 때, 상태가 변경되면 컴포넌트는 재렌더링됩니다. 하지만 useRef로 관리되는 변수의 값이 변경되어도 리액트는 컴포넌트를 재렌더링하지 않습니다. 이는 성능 최적화에 유용하게 사용될 수 있습니다.

즉시 값 조회

useState는 상태를 설정한 후, 그 상태가 업데이트되고 컴포넌트가 재렌더링된 후에야 변경된 상태를 조회할 수 있는 반면에 useRef는 값을 설정하면 바로 그 값을 조회할 수 있어 동기적으로 데이터를 다루는 데 유리합니다.

본문에서는 위의 두 가지 방식을 언급하고 있으며, 이외에도 아래와 같은 여러 방식으로 유용하게 사용할 수 있습니다.

---

DOM 요소 직접 접근

useRef는 특정 DOM 요소에 직접 접근하는 데 사용될 수 있습니다. 예를 들어, 특정 입력 필드에 포커스를 설정하거나, DOM 요소의 크기나 위치를 직접 읽어야 할 때 유용합니다.

이전 상태나 props의 값을 저장

useRef는 컴포넌트가 재렌더링될 때 이전 상태나 props의 값을 저장하는 데에도 사용할 수 있습니다. 이는 현재 값과 이전 값을 비교해야 할 때 유용합니다.

계산된 값 캐싱

복잡한 계산이나 비용이 많이 드는 연산의 결과를 저장하기 위해 useRef를 사용할 수 있습니다. 이렇게 하면 다음 렌더링 때 동일한 계산을 다시 수행할 필요가 없어 성능을 향상시킬 수 있습니다.

커스텀 훅에서의 인스턴스 변수

useRef는 커스텀 훅 내에서 일종의 인스턴스 변수처럼 사용될 수 있습니다. 이는 컴포넌트 간에 상태를 공유하지 않으면서도 훅 내부에서 일관된 상태를 유지할 수 있게 해줍니다.

타이머 ID 저장

setTimeout이나 setInterval과 같은 타이머 함수들의 ID를 저장하는 데에 useRef를 사용할 수 있으며, 이를 통해 컴포넌트가 언마운트될 때 타이머를 취소할 수 있습니다.