📌 1. React에서 ref란?
DOM 요소나 React 컴포넌트에 직접 접근할 때 사용하는 것
ref는 말 그대로 "참조(reference)"야.
- 예를 들어, HTML 버튼을 직접 클릭시키거나
- 스크롤 위치를 조정하거나
- focus()를 주거나
→ 이럴 때 ref가 필요해.
import { useRef } from 'react';
export default function Example() {
const buttonRef = useRef(null);
const handleClick = () => {
buttonRef.current.click(); // 버튼 강제 클릭
};
return (
<div>
<button ref={buttonRef}>버튼</button>
<button onClick={handleClick}>이 버튼 클릭하면 위 버튼이 강제 클릭됨</button>
</div>
);
}✅ ref.current = 실제 DOM을 가리켜
📌 2. **useRef()**란?
ref를 React 함수형 컴포넌트에서 사용하기 위한 Hook
- useRef()를 쓰면 어떤 값이든 저장할 수 있어
- 저장된 값은 컴포넌트가 다시 렌더링 되어도 사라지지 않아
- (하지만 렌더링을 일으키지는 않아)
✅ useRef()는 값 저장소 + DOM 접근 둘 다 가능해!
📌 3. **useState()**란?
React 컴포넌트에서 상태(state) 를 만들 때 사용하는 Hook
- 상태(state) = 화면에 영향을 주는 데이터
- 값이 바뀌면 자동으로 다시 렌더링
import { useState } from 'react';
export default function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>카운트: {count}</p>
<button onClick={() => setCount(count + 1)}>+1</button>
</div>
);
}✅ useState는 값이 변하면 화면이 자동으로 바뀐다.
📌 4. **useEffect()**란?
React 컴포넌트가 렌더링될 때 또는 특정 값이 바뀔 때 실행되는 코드를 넣는 Hook
- 보통 비동기 작업이나 DOM 조작, 타이머 설정 같은 걸 넣어
- useEffect(() => {}, [의존성배열])
import { useState, useEffect } from 'react';
export default function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
console.log('count 값이 바뀌면 이 코드가 실행된다:', count);
}, [count]); // count가 바뀔 때마다 실행
return (
<div>
<p>{count}</p>
<button onClick={() => setCount(count + 1)}>+1</button>
</div>
);
}✅ useEffect는 '상태나 props가 바뀔 때 하고 싶은 행동' 을 적는 곳이야.
🔥 요약표 (진짜 한눈에)
| Hook | 역할 | 특징 |
| useRef() | DOM 접근 / 값 저장 | 값이 바뀌어도 화면 다시 렌더링 안 함 |
| useState() | 상태값 저장 | 값이 바뀌면 화면 자동 렌더링 |
| useEffect() | 값이 바뀔 때 행동 | 특정 값이 바뀔 때 자동 실행됨 |
✨ 진짜 짧게 요약
- useRef: DOM이나 값 기억, 렌더링X
- useState: 상태 관리, 값 변하면 렌더링O
- useEffect: 값이 변할 때 실행할 코드
🎯 추가로 심화 가볼까?
- ref의 값 변화 감지
- useEffect 안에 async 함수 쓰는 방법
- useRef를 이용한 스크롤 애니메이션
- useEffect로 주기적 타이머 만들기
응 하면 바로 추가로 설명해줄게! 🔥
'잡동사니 > GPT가 알려주는' 카테고리의 다른 글
| [GPT가 알려주는] 웹 레이아웃 : z-index, overflow, flex (0) | 2025.04.15 |
|---|---|
| [GPT가 알려주는] 미배포 시 HTTPS 보안 연결이 사용되지 않았습니다 (0) | 2025.04.15 |
| [GPT가 알려주는] CRA → Vite 마이그레이션 (0) | 2025.04.15 |
| [GPT가 알려주는] 몽고DB와 React 데이터 송수신 (0) | 2025.04.14 |
| [GPT가 알려주는] React - UseRef() 와 UseEffect() (0) | 2025.04.14 |
