useState와 useRef의 차이점 및 사용하는 이유

오늘은 useState와 useRef에 대해서 알아보고 각각의 차이점에 대해 공부해보고자 한다.

 

useState와 useRef는 면접에서 정말 많이 물어보는 근본 질문이기에 잘 파악해보도록 하자..!

 

 

왜 useState, useRef를 사용할까?

먼저 우리가 다른 코딩 언어에서 count라는 변수에 1 값을 증가시키려면 아래와 같은 형식의 코드를 작성한다.

let count = 0;

function handleClick() {
  count++;
  console.log(count);
}

 

하지만 자바스크립트에서 위와 같은 코드로 작성한다면 UI에 반영되지 않는다.

 

 

 

왜 이런 문제가 생기는걸까?

 

 

 

React는 UI는 상태의 함수이다. 즉 어떤 상태를 주면 React는 그에 맞는 화면을 만들어준다.

그런데 일반 변수(let, const)는 React가 알 수 있는 방식으로 바뀌지 않기 때문에 변화를 감지하지 못하고 화면을 다시 그리지 않는다.

 

count는 컴포넌트가 다시 렌더링되지 않으면 UI에 반영되지 않는다.
React는 오직 setState가 호출될 때만 해당 컴포넌트를 다시 렌더링하기 때문에 이러한 문제가 생긴다.

 

 

그렇다면 왜?! React가 직접 변수 변화를 감지하지 않는 걸까?

1. 성능 문제 => 모든 변수의 변화를 추적하려면 React가 전체 메모리와 실행 흐름을 감시해야 하는데 이건 매우 비효율적이다.

2. 예측 가능한 동작 => React는 명확하고 예측 가능한 상태 흐름을 중요시하기에 useState로만 바뀐다고 가정하면 디버깅과 테스트가 쉬워진다. 

 

 

React는 컴포넌트를 다시 그리기 위해서는 상태가 변경되어야 하고 그 역할을 하는 것이 useState와 useRef인 것이다.

 

 

 

useState

useState는 React의 상태를 다루는 가장 기본적인 Hook이다. 컴포넌트 내부에서 값을 기억하고, 그 값이 바뀌면 자동으로 UI를 다시 그려주는 역할을 한다.

const [state, setState] = useState(초기값);

 

state는 현재 상태이고 setState는 상태를 변경하는 함수이다.

setState 안에 넣고 싶은 값을 넣으면 state에 값이 저장된다.

 

setState('안녕하세요') => 이렇게 사용한다면 state에는 '안녕하세요' 라는 값이 담긴다.

useState의 특징으로는

• 컴포넌트가 재렌더링될 때마다 상태가 유지
• 상태가 바뀌면 컴포넌트가 다시 렌더링
• 비동기 처리 (즉시 UI에 반영되는 것처럼 보이지만 내부적으로는 비동기)

이런 것들이 있다.

 

그렇다면 useRef는 무엇일까?

 

 

 

useRef

const ref = useRef(초기값);

 

useRef를 사용하면 ref.current에 값이 저장된다. useRef는 컴포넌트가 렌더링될 때 하나의 container를 반환하고 여기 안에 값(current)을 자유롭게 넣고 빼면서 사용할 수 있다.

 

useRef의 특징으로는

• 렌더링에 영향을 주지 않고 값을 기억하고 싶을 때 사용
• 값은 바뀌지만 UI은 바뀌지 X
• React의 라이프사이클과 무관하게 값 유지 가능

이런 것들이 있다.

 

여기서 useState와 useRef의 가장 큰 차이점을 알 수 있다.

바로 useState는 값이 변경될 때마다 렌더링이 되지만 useRef는 렌더링이 되지 않는다.

 

이 말을 이해하기 쉽게 예시를 들어보자면

 

 

 

useState를 사용하면 이렇게 값이 변경될 때마다 렌더링이 되는 것을 볼 수 있다.

 

 

usestate를 사용하면 '안녕하세요'를 작성할 때 컴포넌트 렌더링이 엄청나게  많이 된것을 확인할 수 있는 반면

 

 

 

useRef를 사용하면 처음에만 컴포넌트 렌더링이 실행되고 이후에 값이 변경되어도 컴포넌트 렌더링이 되지 않는 것을 확인할 수 있다.

 

마지막으로 정리하자면

useState를 사용하는 상황

1. UI에 영향을 주는 값
   • 카운터 숫자, 입력 필드 값, 토글 상태
2. 상태 변경 시 화면이 바뀌어야 할 때
   • 모달의 열림/닫힘 상태
3. 조건부 렌더링을 해야 할 때
   • 로그인 상태에 따라 다른 화면

useRef를 사용하는 상황

1. 렌더링 없이 값 저장이 필요할 때
   • 이전 값 기억
2. 매 렌더링마다 바뀌지 않고 그대로 유지해야 할 때
   • 초기 실행 시 한 번만 쓰고 싶은 값 저장

 

useState는 사용자와 상호작용에 반응해야하는 동적 UI, 서버 응답 데이터, 로그인 상태에 따라 다른 화면이 필요할 때 사용하면

효율적이고 dom에 직접 접근하거나 불필요한 리렌더링을 줄이고 싶을 때 useRef를 사용하면 된다!

 

개발을 하다보면 useRef의 존재를 잊고 항상 useState만 사용하는 경험이 많을텐데

앞으로는 불필요한 리렌더링이 필요없는 상황이 있다면 상황파악을 잘하고 useRef를 사용할 수 있도록 하자!