React Hook 설명

1. useState ⇨ 자바스크립트의 변수 + setter 함수

✅ JS 예시:

let count = 0;

function increaseCount() {
  count++;
  console.log(count); // 값은 바뀌지만 화면은 안 바뀜
}

✅ React 예시:

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

function increaseCount() {
  setCount(count + 1); // 값 바꾸면 화면도 자동으로 업데이트됨
}


2. useEffect ⇨ 자바스크립트의 이벤트 리스너 또는 관찰자 패턴

✅ JS 예시:

document.addEventListener("click", () => {
  console.log("클릭됨!");
});

✅ React 예시:

useEffect(() => {
  const handleClick = () => console.log("클릭됨!");
  document.addEventListener("click", handleClick);

  return () => {
    document.removeEventListener("click", handleClick); // 정리
  };
}, []); // 최초 1회만 실행


3. useRef ⇨ 자바스크립트의 객체 또는 DOM 요소 참조

✅ JS 예시 (DOM 접근):

const input = document.getElementById("myInput");
input.focus();


✅ React 예시:

const inputRef = useRef(null);

useEffect(() => {
  inputRef.current.focus();
}, []);

return <input ref={inputRef} />;

🎯 최종 요약
React 훅 JS에서 비슷한 개념 주 용도 비유
useState let, const + setter 값 저장 + 화면 갱신 메모장
useEffect addEventListener, 자동 실행 로직
useRef 참조형 변수, DOM 선택자 DOM 접근, 상태 추적 (비렌더링)