리액트 스터디 3주차 - useState

Nomore·2025년 7월 28일

ReactStudy

목록 보기

3/7

Lesson 03

학습 목표:
- 컴포넌트 내부 상태를 관리하는 useState 훅의 기본 개념을 이해한다.
- useState를 사용해 동적 UI를 만드는 방법을 배운다.
- props와 state의 차이를 비교하며, 상태 업데이트를 실습한다.
- 사용자 입력(폼)과 이벤트 핸들러를 state로 연결하는 법을 익힌다.
- state 업데이트의 기본 규칙과 팁을 배운다.

이번 주차는 2주차에서 배운 props(외부 데이터 전달)를 기반으로, 컴포넌트가 스스로 관리하는 '내부 상태'에 초점을 맞춥니다. useState는 React Hooks의 기본으로, 사용자 상호작용에 따라 UI를 동적으로 업데이트하는 데 필수적입니다.

STEP 1 useState 기본 개념 이해하기

useState는 React Hooks 중 하나로, 함수형 컴포넌트에서 상태를 관리합니다. 상태(state)가 변경되면 React가 자동으로 컴포넌트를 다시 렌더링해 UI를 업데이트합니다.

왜 useState가 필요한가?: props만으로는 컴포넌트가 사용자 입력이나 이벤트에 반응해 스스로 변할 수 없습니다. 예를 들어, 버튼 클릭으로 숫자가 증가하거나 입력 값이 실시간으로 반영되는 경우 `state가 필요합니다.
특징:
- import: import { useState } from 'react';
- 형식: const [state, setState] = useState(초기값); (state: 현재 값, setState: 업데이트 함수)
- 업데이트: setState를 호출하면 컴포넌트가 리렌더링됩니다. 직접 state를 변경하지 말고 setState를 사용하세요.
- 초기값: 숫자, 문자열, 객체 등 가능하지만, 초보 단계에서는 간단한 타입부터.

STEP 2 간단한 카운터 컴포넌트 만들기

새 파일 Counter.jsx를 src 폴더에 생성하세요. 이는 useState를 사용하는 기본 예시입니다.

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default Counter;

설명: useState(0)으로 초기 상태를 0으로 설정. 버튼 클릭 시 setCount(count + 1)로 상태 업데이트. 상태가 변하면 컴포넌트가 다시 렌더링되어 화면에 새 값이 표시됩니다.

2-1 App.jsx 수정 (카운터 호출)

src/App.jsx를 수정해 Counter를 불러옵니다.

import Counter from './Counter';

function App() {
  return (
    <div>
      <Counter />
    </div>
  );
}

export default App;

설명: 이제 앱에서 카운터가 동작합니다. 여러 <Counter />를 추가하면 각자 독립적인 state를 가집니다.

STEP 3 고급 예시: 문자열 state (폼 입력 관리)

useState로 사용자 입력을 관리해 보세요. 새 파일 InputForm.jsx를 생성합니다.

import { useState } from 'react';

function InputForm() {
  const [name, setName] = useState('');

  return (
    <div>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Enter your name"
      />
      <p>Hello, {name}!</p>
    </div>
  );
}

export default InputForm;

App.jsx 수정:

import InputForm from './InputForm';

function App() {
  return (
    <div>
      <InputForm />
    </div>
  );
}

export default App;

설명: value={name}으로 state를 입력에 바인딩, onChange로 입력 변화 시 setName 호출.

STEP 4 추가 예시: props와 useState 결합 (이벤트 핸들러)

props로 초기값과 이벤트 핸들러를 관리합니다. FormInput.jsx를 수정합니다.

function FormInput(props) {
  return (
    <div>
      <label>{props.label}</label>
      <input
        type="text"
        value={props.value}
        onChange={props.onChange}
        placeholder={props.placeholder}
      />
    </div>
  );
}

export default FormInput;

App.jsx 수정:

import { useState } from 'react';
import FormInput from './FormInput';

function App() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  return (
    <form>
      <FormInput
        label="Name"
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Enter your name"
      />
      <FormInput
        label="Email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Enter your email"
      />
    </form>
  );
}

export default App;