let

• 컴포넌트가 리렌더링 될 때 초기화 → 이전 값 유지 ❌

useRef()

• 리렌더링이 되어도 값 유지 ⭕️

• useState()와 달리 상태값이 변경되어도 컴포넌트가 리렌더링이 유발되지 않음

• 주로 DOM 요소에 접근(input에 focus를 주거나 스크롤 위치를 조정)

  function FocusInput() {
    const inputRef = useRef(null);
  
    useEffect(() => {
      inputRef.current.focus();
    }, []);
  
    return <input ref={inputRef} />;
  }

• setTimeout(), setInterval()의 ID를 저장

  → 컴포넌트가 리렌더링되어도 타이머 ID가 유지되어야 cleanup 함수에서 해당 값을 이용하여 타이머를 정리할 수 있기 때문

  function Timer() {
    const timerRef = useRef(null);
  
    useEffect(() => {
      timerRef.current = setInterval(() => {
        console.log("Interval 실행");
      }, 1000);
  
      return () => clearInterval(timerRef.current);
    }, []);
  
    return <div>타이머 실행 중</div>;
  }

---

컴포넌트 외부의 let

컴포넌트 외부에 let을 선언하면 리렌더링에 영향을 받지않지만 권장하지 않는 패턴

1. 컴포넌트 외부의 변수는 모든 컴포넌트 인스턴스가 공유 → 같은 컴포넌트를 여러번 사용할 때 예상치 못한 동작이 발생
2. 전역 변수처럼 동작하기 때문에 코드의 예측 가능성과 유지보수성이 떨어짐
3. 리액트의 원칙 중 하나의 단반향 데이터 흐름에 위배

---

정리

	let	useRef()	useState()
값 유지	❌	🟢	🟢
리렌더링 발생	❌	❌	🟢
값 변경 시 화면 업데이트	❌	❌	🟢