Tagged: useState

React 에서 useState 이란?

React 에서 useState 은 훅(Hook) 에 하나다. 함수 컴포넌트에 상태를 추가하기 위한 훅이다.

useState

useState 의 기본 문법
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import React, { useState } from 'react';
 
function ExampleComponent() {
  // Declare a state variable and a function to update it
  const [count, setCount] = useState(0);
 
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
 
export default ExampleComponent;

키 포인트

  1. 초기값(Initialization): useState(initialValue) 은 상태의 초기값을 가진다.
  2. 상태 변수(State Variable): 배열의 첫번째 요소는 현재 상태 값이다.
  3. 업데이터 함수(Updater Function): 배열의 두번째 요소는 상태를 업데이트 하기 위한 함수다.

또 다른 키 포인트는 useState 가 배열로 값을 리턴한다.

여러 예제

여러 상태 값

Multiple State Variables
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function UserProfile() {
  const [name, setName] = useState('');
  const [age, setAge] = useState(0);
 
  return (
    <div>
      <input
        type="text"
        placeholder="Enter name"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <input
        type="number"
        placeholder="Enter age"
        value={age}
        onChange={(e) => setAge(Number(e.target.value))}
      />
      <p>Name: {name}, Age: {age}</p>
    </div>
  );
}

복잡한 상태 업데이트

Updating Complex State (Objects)
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function UserSettings() {
  const [settings, setSettings] = useState({ theme: 'light', notifications: true });
 
  const toggleTheme = () => {
    setSettings((prevSettings) => ({
      ...prevSettings,
      theme: prevSettings.theme === 'light' ? 'dark' : 'light',
    }));
  };
 
  return (
    <div>
      <p>Current Theme: {settings.theme}</p>
      <button onClick={toggleTheme}>Toggle Theme</button>
    </div>
  );
}

배열을 상태로 가지는 예제

State with Arrays
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function TodoList() {
  const [todos, setTodos] = useState([]);
 
  const addTodo = () => {
    setTodos([...todos, `Task ${todos.length + 1}`]);
  };
 
  return (
    <div>
      <button onClick={addTodo}>Add Todo</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </div>
  );
}

팁(Tip)

  • 상태를 변경하기 위해서 업데이트 함수(setState) 를 사용해라.
  • 복잡한 업데이트의 경우, 상태의 오래된 값을 방지하기 위해 setState의 함수형 형태를 사용해라.
  • 상태 객체나 배열을 직접 변경하지 말고 항상 새로운 복사본을 생성하라.