React Hooks - useState와 useRef 비교

지두팔·2024년 8월 21일

리액트에서는 컴포넌트의 상태나 값을 관리하기 위해 다양한 훅(Hooks)을 제공해준다.
그 중 useState와 useRef는 가장 많이 사용되는 훅들 중 하나이다.
공부하다보니 이 두 훅이 스리~살짝 비슷해보여서 헷갈렸는데 찾아보니 서로 완전 다른 뚜렷한 목적을 갖고 있다는 것을 알게되어 이 둘의 차이점을 정리해보려 한당.

가장 큰 차이점 - 리렌더링 여부

useState 👉 리렌더링 발생 ✅

useState로 관리하는 값이 변경되면 컴포넌트가 다시 렌더링됨. 이로 인해 상태 값이 UI에 반영된다

useRef 👉 리렌더링 발생 ❌

useRef는 값이 변경되더라도 컴포넌트가 리렌더링되지 않는다. 따라서 UI에는 아무런 영향이 없음.

사용 사례 비교

useState

UI와 직결된 데이터를 관리할 때
- 폼 입력 데이터: 사용자가 입력한 이름, 이메일 등.
- UI 상태 관리: 토글 상태, 모달의 열림/닫힘 상태 등.
- API 데이터 저장: 서버로부터 받아온 데이터를 관리.

useRef

UI와는 무관한 값 관리할 때 사용됨
- DOM 요소 접근: 특정 요소에 포커스를 주거나, 직접적으로 조작할 때.
- 값의 지속적 참조: 컴포넌트가 리렌더링되더라도 유지되어야 하는 값, 예를 들어 렌더링 횟수 카운트 / 수정 횟수 카운트 등등..
- 타이머 관리: setTimeout, setInterval의 ID를 저장해 클린업할 때.

성능..!

~~사실 아직 성능을 논하기에 넘나 쪼렙이고 내용도 어렵지만 그래도 알아두자고!~~

useState

상태가 변경될 때마다 컴포넌트가 리렌더링되므로, 자주 변하는 값일 경우 불필요한 렌더링이 발생할 수 있다.
주로 UI에 반영되어야 하는 값 관리에 사용됨

useRef

값이 변경되어도 리렌더링되지 않기 때문에, 성능에 영향을 주지 않음
주로 렌더링과 관계없는 값을 관리하기 위해 사용

해당 내용을 찾아보다가 https://www.inflearn.com/community/questions/608346/useref%EB%A5%BC-%EC%84%A0%ED%98%B8%ED%95%98%EC%8B%9C%EB%8A%94-%EC%9D%B4%EC%9C%A0%EA%B0%80-%EA%B6%81%EA%B8%88%ED%95%A9%EB%8B%88%EB%8B%A4
이 답변 글도 도움이 많이 되었다!

useState 👉 리액트가 직접 폼요소에 개입, 제어하는 방식

useRef 👉 리액트의 간섭을 최소화하고 HTML native 기능을 최대한 활용하는 방식

초기값 설정과 데이터 구조

useState

초기값을 설정할 수 있으며, 컴포넌트가 처음 렌더링될 때만 반영됨
상태(state)와 상태를 업데이트하는 함수(setState)를 반환하며, state 값은 숫자, 문자열, 객체 등 다양한 데이터 타입이 가능함

const [count, setCount] = useState(0);

useRef

useRef도 초기값을 설정할 수 있으며, 이 값은 ref.current에 저장됨.
컴포넌트가 처음 렌더링될 때만 초기값이 설정된다.
useRef는 { current: initialValue } 객체를 반환하며, ref.current로 값에 접근할 수 있다.

const countRef = useRef(0);

사용 목적

useState

UI와 상태를 동기화 하기 위해!
useState는 상태가 변경될 때 마다 UI가 업데이트 되도록 설계되어있다.

useRef

UI에 영향을 미치지 않는 값을 관리하거나, 직접 DOM을 조작하기 위한 용도로 사용
컴포넌트의 렌더링 사이클과 무관하게 유지됨

요약

특징	`useState`	`useRef`
리렌더링	값이 변경되면 리렌더링	값이 변경되어도 리렌더링되지 않음
사용 사례	UI에 영향을 주는 상태 관리	DOM 접근, 렌더링 간 값 유지, 타이머 참조
값 업데이트	상태 값이 변경되면 UI가 다시 그려짐	값이 변경되어도 렌더링은 발생하지 않음
값의 접근 방식	`state`와 `setState` 함수로 관리	`ref.current`으로 값 접근 및 변경
성능	불필요한 렌더링이 발생할 수 있음	렌더링을 피할 수 있어 성능에 유리