[리액트] useState : 상태 관리 기초

state = 현재 상태값 / setState = 상태 업데이트 함수 / initialState = 상태의 초기 값 / useState = 배열 반환

1. 기본 사용법

useState는 배열을 반환하며, 첫 번째 요소는 현재 상태 값, 두 번째 요소는 상태를 업데이트하는 함수입니다.

import React, { useState } from 'react';

function Example() {
  // count 상태 변수를 0으로 초기화
  const [count, setCount] = useState(0);

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

2. 초기값 설정

useState의 인자로 초기 상태 값을 전달할 수 있습니다. 이 값은 컴포넌트가 처음 렌더링될 때 사용됨.

const [name, setName] = useState("철수"); // 초기값을 "철수"로 설정

3. 상태 업데이트

상태 업데이트 함수는 새로운 값을 인자로 받아 상태를 업데이트합니다. 이 함수는 비동기적으로 작동하므로, 상태가 즉시 업데이트되지 않을 수 있음.

setCount(count + 1); // 현재 count를 1 증가시킴

4. 함수형 업데이트

상태 업데이트는 함수형으로도 할 수 있어, 이전 상태를 기반으로 새로운 상태를 계산할 수 있음.

setCount(prevCount => prevCount + 1); // 이전 상태를 기반으로 업데이트

5. 객체 상태 관리

상태가 객체인 경우, 객체의 불변성을 유지하기 위해 스프레드 연산자를 사용하는 것이 일반적임.

const [user, setUser] = useState({ name: "철수", age: 25 });

// user 객체의 name을 업데이트
setUser(prevUser => ({ ...prevUser, name: "영희" }));

6. 여러 상태 변수

여러 개의 상태 변수를 사용할 수 있으며, 각 상태는 독립적으로 관리됨.

const [count, setCount] = useState(0);
const [name, setName] = useState("철수");

7. 상태 초기화 함수

상태의 초기값이 복잡한 계산을 필요로 하는 경우, 초기값을 계산하는 함수를 전달할 수 있음. 이 함수는 컴포넌트의 초기 렌더링 시에만 호출됨.

const [count, setCount] = useState(() => {
  const initialCount = /* 복잡한 계산 */;
  return initialCount;
});

결론

useState는 리액트에서 상태를 관리하는 중요한 도구로, 함수형 컴포넌트에서 상태를 쉽고 간편하게 추가하고 업데이트할 수 있게 해줌.

 

ex ) 간단한 카운터 컴포넌트

import React, { useState } from 'react'; // React와 useState 훅을 가져옴 // Counter 컴포넌트 정의

function Counter() { // count라는 상태 변수를 0으로 초기화하고, setCount 함수를 통해 상태를 업데이트함
  const [count, setCount] = useState(0);  // 컴포넌트의 UI를 반환
  
  return (
    <div>
      {/* 현재 클릭 횟수를 표시 */}
      <p>You clicked {count} times</p>
      {/* 버튼 클릭 시 setCount 함수를 호출하여 count를 1 증가시킴 */}
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
export default Counter; // Counter 컴포넌트를 외부에서 사용할 수 있도록 내보냄

count = 현재 카운트 값 / setCount = 업데이트 함수

버튼을 클릭할때마다 setCount함수가 호출되어