반응형 useState2 useState를 중심으로 상태 변화 화면 변경 Tailwind 스타일 ✅ 핵심 키워드: useState✔️ 정의useState는 React 컴포넌트 내부에서 값을 저장하고,그 값이 바뀌면 자동으로 해당 컴포넌트가 다시 렌더링되는 메커니즘입니다.🧠 상태 변화 흐름 정리① 상태 정의const [flag, setFlag] = useState(false);항목의미flag현재 상태값 (true/false 같은 정보 저장)setFlag상태를 변경하는 함수 (flag가 바뀌면 화면 자동 갱신) ② 사용자 이벤트로 상태 변경const handleToggle = () => { setFlag(!flag);}사용자가 버튼 클릭 시 handleToggle 함수 실행flag가 true ↔ false로 변경됨③ 상태 변경 → 화면 다시 렌더링상태가 바뀌면 컴포넌트 전체가 다시 실행됨flag가 .. 2025. 7. 3. React 기초: useState Hook 📘 React 기초: useState Hook ✅ 1. React Hook 이란?Hook은 함수형 컴포넌트에서도 상태(state)와 생명주기(lifecycle) 기능을 사용할 수 있도록 도와주는 React 내장 함수.기존에는 클래스 컴포넌트에서만 사용 가능했던 기능을 함수형에서도 사용하게 해줌.React 16.8 버전부터 도입됨.✅ 2. 대표적인 Hook: useState➤ 정의const [state, setState] = useState(initialState);요소설명state현재 상태값 (읽기 전용)setState상태를 업데이트하는 함수initialState초기 상태값 (예: 숫자, 문자열, 객체 등) 예시:import { useState } from 'react';function Counter(.. 2025. 6. 27. 이전 1 다음 반응형
