useRef (2)

사용법

 

컴포넌트의 최상위 레벨에서 useRef를 호출하여 하나 이상의 ref를 선언한다.

import { useRef } from 'react';

function Stopwatch() {
  const intervalRef = useRef(0);

 

 

interval  ID를 저장했다가 나중에 불러와야 하는 경우 ref에 넣을 수 있다.

ref 내부의 값을 업데이트 하려면 current 프로퍼티를 수동으로 변경해야 한다.

function handleStartClick() {
  const intervalId = setInterval(() => {
    // ...
  }, 1000);
  intervalRef.current = intervalId;
}

 

나중에 ref에서 해당 interval ID를 읽어 해당 Interval 을 취소할 수 있다.

 

function handleStopClick() {
  const intervalId = intervalRef.current;
  clearInterval(intervalId);
}

 

 

초기값 설정

• useRef는 초기값을 설정할 수 있다
• 이 초기값은 ref 객체의 current 프로퍼티에 저장된다

동일한 객체 반환

• 컴포넌트가 다시 렌더링되더라도 useRef는 동일한 객체를 반환한다
• 따라서 current 프로퍼티에 저장된 값은 계속 유지된다

정보 저장 및 읽기

• current 프로퍼티를 변경하여 정보를 저장할 수 있다.
• 나중에 이 정보를 읽을 수 있다.

상태와의 차이

• useRef의 current 프로퍼티를 변경해도 컴포넌트를 다시 렌더링 하지 않는다.
• 반면, useState는 상태가 변경될 때 마다 컴포넌트를 다시 렌더링 한다.

시각적 출력에 영향 x

• ref는 시각적 출력에 영향을 미치지 않는 정보를 저장하는데 적합하다
• 예) 타이머의 ID같은 정보를 저장할 수 있다.

---

ref를 변경해도 다시 렌더링 되지 않으므로 화면에 표시되는 정보를 저장하는 데는 ref가 적합하지않다.<<?

 

ref와 state의 차이점을 알아보고 어느 상황에 어느 훅이 적합한지 알아보자

 

---

ref 와 state 의 차이점

 

 

	refs	state
초기화	useRef(initialValue) : { current : initialValue } 의 형태	useState(initialValue) : [ value,setValue ] 의 형태 value는 현재 state값, setValue는 state 값 업데이트 하는 함수
리렌더링	변경 시 리렌더링을 촉발하지 않음	변경 시 리렌더링 촉발
변경 가능성	Mutable - 렌더링 프로세스 외부에서 current 값을 자유롭게 수정하고 업데이트 할 수 있음	Immutable -state값을 변경하려면 반드시 state 설정 함수를 사용하여 수정해야함
렌더링 중 사용	렌더링 중에는 current 값을 읽거나 쓰지 않아야 함	언제든지 state를 읽을 수 있음.각 렌더링에는 변경되지 않는 자체 state snapshot이 있음

 

---

 

함정❗️

 

렌더링 중에는 ref.current를 쓰거나 읽지 말아야 하는 이유.

 

React는 컴포넌트의 본문이 순수함수처럼 동작하기를 기대한다. (순수함수란, 동일한 입력값이 주어지면 항상 동일한 출력을 반환하는 함수) 순수함수는 외부 상태에 의존하지 않으며, 호출 순서나 인수의 변화가 다른 호출의 결과에 영향을 미치지 않는다.

 

useRef를 사용하면 ref 객체의 current 프로퍼티에 값을 저장할 수 있다. 그러나 렌더링중에 ref.current를 읽거나 쓰면 순수함수의 기대가 깨질 수 있다.

 

왜 안되는가?

 

일관성 문제 : 렌더링 중에 ref.current 를 읽거나 쓰면, 동일한 입력값에 대해 동일한 출력을 보장할 수 없다. 이는 컴포넌트의 일관성을 헤친다

예측 불가능한 동작 : 렌더링 중에 ref.current 를 수정하면, 다른 컴포넌트나 후속 렌더링에서 예기치 않은 동작을 초래할 수 있다.

Strict Mode : Strict Mode 에서는 컴포넌트 함수를 두 번 호출하여 문제를 찾아내기 때문에, 렌더링 중에  ref.current 를 변경하면 예상치 못한 결과가 발생할 수 있다.