[리액트] useState

[리액트] State

 

useState는 상태를 관리하는 훅이며, state는 useState를 통해 관리되는 실제 데이터다.

---

useState

리액트에서 상태(state)를 관리하는 데 사용하는 훅(Hook)으로, 함수형 컴포넌트에서 상태를 추가할 수 있게 해준다.

 

초기 상태 값을 인자로 받으며, 배열을 반환한다.
배열의 첫 번째 요소는 현재 상태 값이고, 두 번째 요소는 상태를 업데이트하는 함수다.

const [state, setState] = useState(initialValue);

 

• state: 현재 상태 값.
• setState: 상태 값을 변경하는 함수.
• initialValue: state의 초기 값.

---

상태 변수 : 첫번째 요소

• useState에서 반환하는 첫 번째 값은 현재 상태 값으로, 상태 값은 컴포넌트의 렌더링마다 최신 상태를 반영한다.
• 컴포넌트가 다시 렌더링될 때, state 값은 계속 업데이트된 상태로 유지되고, 상태가 변경되면 리액트는 컴포넌트를 다시 렌더링하며, 그때 상태 값도 최신으로 반영된다.

상태 업데이트 함수 : 두번째 요소

• useState의 두 번째 값은 상태를 변경하는 함수로, 상태 값을 업데이트할 때 사용된다.
• 이 함수는 상태가 변경되면 컴포넌트를 다시 렌더링하게 만든다.

useState의 초기 값

• useState에 전달하는 초기 값은 컴포넌트가 처음 렌더링될 때만 사용된다.
• 이후 상태가 업데이트되면, 초기 값은 더 이상 사용되지 않는다.

---

상태 업데이트는 비동기적이다

상태를 업데이트하는 setState는 비동기적으로 처리된다.

즉, 상태가 업데이트되면 바로 그 값이 반영되지 않고, 다음 렌더링 주기에서 상태가 반영된다.

함수형 업데이트

여러 번 상태를 업데이트할 때, 이전 상태를 기반으로 새로운 값을 계산하는 함수형 업데이트 방식이 유용하다.

setState에 함수 형태로 전달하면, 상태 변경을 정확하게 반영할 수 있다.

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

const increment = () => {
  setCount(prevCount => prevCount + 1); // 이전 값을 기반으로 상태를 변경한다.
};

상태 값이 객체나 배열일 때

상태 값이 객체나 배열일 경우, 불변성을 지켜야 한다. 객체나 배열을 직접 수정하면 리액트가 이를 감지하지 못하므로, 새로운 객체나 배열을 생성해서 상태를 업데이트해야 한다.