React - State, useState, Hooks 개념정리

📌 팩트체크: State, useState, Hooks

✅ 전체적으로 맞는 개념이지만, 추가적으로 보완하면 더 정확해질 수 있어!

---

1️⃣ State (상태)란?

React 컴포넌트 내에서 값을 저장하고 변경할 수 있는 변수
컴포넌트가 리렌더링될 때 유지됨.

✅ 맞음!
💡 일반 변수(let, const)는 값이 변경되더라도 컴포넌트가 다시 렌더링될 때 초기화됨.
하지만 state는 React가 관리하며 값이 변경될 때 자동으로 렌더링을 트리거함.

let count = 0;  // 일반 변수 → 값 변경해도 UI 업데이트 안됨.
const [count, setCount] = useState(0); // State → 값 변경하면 UI 자동 업데이트됨.

---

2️⃣ useState란?

React에서 상태(state)를 관리하는 Hook 중 하나
함수형 컴포넌트에서 state를 사용할 수 있게 해줌.

✅ 맞음!
💡 React는 클래스형 컴포넌트 대신 함수형 컴포넌트를 추천하며,
useState를 사용하면 함수형 컴포넌트에서도 상태를 관리할 수 있음.

📌 useState 사용 예시

import React, { useState } from 'react';

function Counter() {
    const [count, setCount] = useState(0); // count 상태 생성

    return (
        <div>
            <p>현재 카운트: {count}</p>
            <button onClick={() => setCount(count + 1)}>+1 증가</button>
        </div>
    );
}

✅ useState(초기값) → 초기값을 설정하고, 상태 변수와 변경 함수(setCount)를 반환함.
✅ setCount() 호출 시 컴포넌트가 다시 렌더링되면서 UI 업데이트됨.

---

3️⃣ Hooks란?

React의 기능을 확장할 수 있는 함수들의 모음
함수형 컴포넌트에서 상태 관리, 라이프사이클 관리, 부가 기능을 추가할 수 있도록 함.

✅ 맞음!
💡 Hooks는 함수형 컴포넌트에서만 사용 가능하며, 대표적인 Hook들은 다음과 같아.

Hook	역할
useState	상태 관리
useEffect	컴포넌트가 렌더링될 때 특정 동작 수행
useRef	DOM 요소나 값을 저장 (렌더링 없이 값 유지)
useContext	전역 상태 관리 (Redux 없이도 가능)
useReducer	복잡한 상태 로직 관리 (Redux와 유사)

---

✅ 최종 팩트체크 결과

개념	설명	맞음 여부
State(상태)	컴포넌트 내에서 관리하는 변수, 값이 변경되면 렌더링됨	✅ 맞음!
useState	상태를 관리하는 Hook, 상태 값과 변경 함수를 제공	✅ 맞음!
Hooks	React에서 기능을 확장하는 함수들의 모음	✅ 맞음! (추가 설명 보완함)

🚀 완벽하게 이해했다면 이제 useState를 직접 활용해보면 좋아!
추가 질문 있으면 편하게 물어봐! 😊