React 상태 관리: useRef with useState, let

물론이죠! 아래에 티스토리 스타일의 포스팅으로 깔끔하게 정리해드렸어요. 코드 블럭과 설명이 어우러지도록 구성했고, useRef와 전역 변수의 활용에 대한 흐름도 자연스럽게 이어지게 작성했습니다.

---

✅ useRef 꼭 써야 하는 이유와 전역 변수 활용 시 주의할 점

React 컴포넌트를 작성하다 보면 상태를 저장할 때 let, useState, useRef 중 어떤 걸 써야 할지 헷갈릴 수 있어요.
특히 리렌더링과 관련된 값의 유지, DOM 접근 여부에 따라 적절한 선택이 필요합니다.
이번 글에서는 useRef가 필요한 이유와 컴포넌트 바깥에서 변수를 선언할 때 주의할 점까지 함께 정리해봅니다.

---

✅ 1. useRef를 써야 하는 대표적인 3가지 상황

---

🔹 1) 컴포넌트가 리렌더링돼도 값이 유지되어야 할 때

let count = 0;           // ❌ 리렌더링되면 다시 0으로 초기화됨
const ref = useRef(0);   // ✅ 리렌더링되어도 값 유지됨

const handleClick = () => {
  count++;        // let은 클릭할 때마다 초기화되어 항상 1
  ref.current++;  // useRef는 누적됨
};

---

🔹 2) 렌더링에 영향을 주지 않는 값을 저장할 때

useState는 값이 변경되면 컴포넌트가 다시 렌더링되지만,
useRef는 .current 값이 바뀌어도 리렌더링되지 않습니다.

const countRef = useRef(0);

const handleClick = () => {
  countRef.current += 1; // 화면에는 영향 없음
};

→ 렌더링이 필요 없는 내부 상태를 저장할 때 매우 효율적입니다.

---

🔹 3) DOM 요소를 직접 참조해야 할 때

const inputRef = useRef();

useEffect(() => {
  inputRef.current.focus(); // ✅ input 요소에 직접 접근 가능
}, []);

return <input ref={inputRef} />;

→ let으로는 DOM 요소에 접근할 수 없기 때문에 useRef가 필수입니다.

---

✅ 2. let, useState, useRef 비교표

항목	let	useState	useRef
리렌더링 시 값 유지	❌ 초기화됨	✅ 유지됨	✅ 유지됨
값 변경 시 리렌더링 발생	❌ 발생 안 함	✅ 발생함	❌ 발생 안 함
DOM 접근 가능	❌ 불가능	❌ 불가능	✅ ref.current로 가능
주 용도	계산용 임시 변수	UI 상태 관리	상태 저장 (렌더링 불필요한 값), DOM 참조

---

✅ 3. 컴포넌트 함수 바깥에서 변수를 선언하면?

let globalCounter = 0;

function Counter() {
  const handleClick = () => {
    globalCounter++;
    console.log(globalCounter);
  };

  return <button onClick={handleClick}>Click</button>;
}

✅ 이 경우 어떤 특징이 있을까?

• 모든 Counter 컴포넌트가 **같은 전역 변수(globalCounter)**를 공유함
• 한 컴포넌트에서 값을 변경하면, 다른 컴포넌트에도 영향이 감

---

✅ 의도적으로 이렇게 설계하는 경우는?

1. 전역적인 간단한 상태 공유

• 예: 페이지 전체에서 클릭 횟수 기록
• 별도 전역 상태 라이브러리까지는 필요 없을 때 사용

---

2. 로깅, 통계 수집 등 UI와 직접 관련 없는 정보 저장

let totalRenderCount = 0;

function MyComponent() {
  useEffect(() => {
    totalRenderCount++;
    console.log('전체 렌더 수:', totalRenderCount);
  }, []);
  
  return <div>...</div>;
}

→ 이런 경우는 useState나 useRef 대신 전역 let도 괜찮습니다.

---

3. 싱글톤 객체 또는 전역 저장소처럼 사용하고 싶을 때

const globalStore = {
  user: null,
  token: null,
};

export default globalStore;

→ 여러 컴포넌트에서 상태를 공유하고 싶을 때, 전역 객체로 구성할 수 있습니다.

---

⚠️ 주의할 점

• 전역 변수는 React의 상태 관리 흐름에서 벗어납니다.
• 예상하지 못한 값 공유로 인해 디버깅이 어려운 버그를 만들 수 있습니다.
• 특히 컴포넌트가 자주 마운트/언마운트 될 경우 더욱 주의가 필요합니다.

---

✅ 결론

useRef는 렌더링에 영향을 주지 않으며, 값도 리렌더링 간 유지됩니다.
컴포넌트 외부의 전역 변수는 아주 제한적인 상황에서만 사용하고,
가능하면 **React 내부의 흐름 (useState, useRef)**에 따라 상태를 관리하는 것이 좋습니다.