React Hook 설명
Front-End/React 2025. 4. 11. 09:531. 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 접근, 상태 추적 (비렌더링)
'Front-End > React' 카테고리의 다른 글
| React 에서 Chart.js 관련 차트 구현 (0) | 2025.04.01 |
|---|---|
| React 시작하기 - 1 (0) | 2020.07.03 |
| React 프로젝트 실행 (0) | 2020.06.01 |
| create react app 설치 (0) | 2020.05.28 |
