React - UseState

useState란?

• React에서 제공하는 기본 Hooks 중 하나
• 함수형 컴포넌트에서 상태(state) 를 관리하기 위한 기능
• 컴포넌트 단위로 상태를 저장하고, 변화 시 자동으로 재렌더링이 발생

const [state, setState] = useState<타입>(초기값);

구성 요소

• state: 현재 상태 값 (변수)
• setState: 상태를 변경하는 함수
  • 보통 set + 상태이름 형식으로 명명 (setCount, setName 등)
• <타입>: TypeScript 사용 시, 상태의 타입을 명시 가능 (선택)
• 초기값: 상태의 초기값

---

사용 시 주의사항

1. useState는 반드시 컴포넌트 최상단에서만 호출 가능
   ❌ 조건문, 반복문, 함수 내부 등에서는 사용 불가
2. useState는 호출될 때마다 배열을 반환
   • 첫 번째 요소는 상태값
   • 두 번째 요소는 상태 업데이트 함수

---

상태 변경 방식

✅ 일반 방식

setCount(count + 1);
setCount(count + 1);

이렇게 하면 두 번째 호출에서 이전 상태 변화(count + 1)를 인식하지 못함
→ 결과적으로 한 번만 증가

✅ 함수형 업데이트 방식 (추천)

setCount(prev => prev + 1);
setCount(prev => prev + 1);

prev는 최신 상태값을 의미
→ 누적 반영되어 최종적으로 +2가 적용됨

---

 실전 예제

const [count, setCount] = useState<number>(0);
const [message, setMessage] = useState<string>('안녕하세요');
const [msg, setMsg] = useState<string>('hi'); // 조건문 내에서 사용하면 안 됨!

const handleUpClick = () => {
  setCount(prev => prev + 1);
  setCount(prev => prev + 1); // +2
}

const handleDownClick = () => {
  setCount(prev => prev - 1);
  setCount(prev => prev - 1); // -2
}

 

---

출력 결과

<p>You clicked {count} times</p>
<button onClick={handleUpClick}>카운트 +2 증가</button>
<button onClick={handleDownClick}>카운트 -2 감소</button>

<p>{message}</p>
<p>{msg}</p>

---

useState로 폼 데이터 상태 관리하기

useState는 단일 값뿐 아니라 여러 개의 입력 필드가 있는 폼(form) 을 관리할 때도 유용하게 사용할 수 있다. 이 글에서는 다음 내용을 다룬다:

• 단일 input/select 요소의 상태 관리
• 객체 형태로 묶인 여러 개의 input 상태 관리
• 이벤트 핸들러 분리 및 초기화 처리

---

기본적인 input 상태 관리

useState로 하나의 값을 상태로 관리할 수 있으며 사용자 입력을 실시간으로 추적할 때 사용된다.

const [inputValue, setInputValue] = useState<string>("");

<input
  type="text"
  value={inputValue}
  onChange={(e) => setInputValue(e.target.value)}
/>

 

onChange이벤트란?

사용자가 input, textarea, select등의 요소에 변화를 줄 때 발생하는 이벤트

매번 변화할 때마다 setInputValue로 갱신한다.

<select onChange={(e) => setInputValue(e.target.value)}>
  <option value="lotte">lotte</option>
  <option value="kia">kia</option>
</select>

초기화버튼도 함께 제공해 UX 개선이 가능

<button onClick={() => setInputValue("")}>초기화 버튼</button>

 

여러개의 입력 필드 상태 관리하기

interface ILogin {
  id: string;
  password: string;
}

const loginInitialValue = {
  id: "",
  password: "",
};

const [login, setLogin] = useState<ILogin>(loginInitialValue);

폼 전체를 객체로 관리하면 구조가 깔끔해지고, 입력 필드가 많아질수록 이점이 커진다.

<input
  name="id"
  value={login.id}
  onChange={handleLoginChange}
/>

<input
  name="password"
  value={login.password}
  onChange={handleLoginChange}
/>

핸들러는 아래처럼 공통으로 처리한다.

const handleLoginChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  const { name, value } = e.target;

  setLogin({
    ...login,
    [name]: value, // name값과 일치하는 속성만 갱신
  });
};

---

폼 전송 및 초기화 처리

전송 이벤트는 onSubmit을 통해 처리한다.

const handleLoginSubmit = (e: React.FormEvent) => {
  e.preventDefault(); // 새로고침 방지
  console.log('폼 데이터가 제출 되었습니다.', login);
  setLogin(loginInitialValue); // 상태 초기화
};

초기화 버튼도 따로 관리 가능하다.

<button type="button" onClick={handleResetLogin}>초기화</button>

---