useState의 구조와 원리
useState는 리액트에서 상태 관리를 위해 사용하는 훅입니다. 이 훅은 배열을 반환하며, 첫 번째 요소는 현재 상태의 값이고, 두 번째 요소는 상태를 업데이트하는 함수이다. 이 구조는 배열의 디스트럭쳐링을 통해 쉽게 사용할 수 있습니다.
예를 들어
const array = [1, 2, 3, 4, 5];
// 위 배열을 변수에 할당하라 했을때
const a = array[0];
const b = array[1];
//디스트럭쳐링을 모른다면 변수에 할당할 수 있지만,
//알고있다면
const [a, b] = array;
// 이렇게 할 수 있다.
위 예시처럼 useState는 배열의 요소를 디스트럭쳐링하여 반환한 것이다.
import React, { useState } from 'react';
function Counter() {
// useState를 사용하여 count 상태와 setCount 함수를 정의
const [count, setCount] = useState(0);
return (
<div>
<p>현재 카운트: {count}</p>
<button onClick={() => setCount(count + 1)}>증가</button>
<button onClick={() => setCount(count - 1)}>감소</button>
</div>
);
}
export default Counter;
-
setCount 호출 이 함수가 실행되면, 리액트는 내부적으로 컴포넌트의 상태를 변경하는 과정을 시작한다. 비동기적 업데이트가 이루어진다.
- 상태 변경 요청 → 리액트의 내부 상태 저장소 리액트는 useState를 통해 관리되는 상태 저장소(State Queue)를 가지고 있다.
- setCount를 호출하면 상태 변경 요청(action)이 이 저장소에 추가된다.
- 이 저장소는 이전 상태 값을 직접 변경하지 않고, 새 값을 예약하는 방식으로 동작한다.
- 리렌더링 트리거 리액트는 setCount 호출 후, 다음 렌더링을 스케줄링한다. 즉, 즉시 변경되는 것이 아니라 렌더링 사이클에서 처리된다.
- 상태 변경 요청이 들어오면, 리액트는 “새로운 렌더링이 필요하군!” 하고 내부적으로 렌더링을 예약.
- 그 후, 컴포넌트가 다시 렌더링되며 useState가 제공하는 새로운 상태 값을 반영.
- 새로운 상태 값 적용 새로운 렌더링이 시작되면, 리액트는 이전 렌더링에서 받은 상태 변경 요청을 처리.
- 상태 변경 요청이 적용된 후 useState의 첫 번째 값이 업데이트.
- 업데이트된 값으로 컴포넌트가 다시 렌더링되며, 화면에 반영. 내부적으로 setCount가 직접 상태를 변경하지 않는 이유 리액트는 불변성(Immutability) 원칙을 따르기 때문에, setCount가 상태를 직접 변경하지 않는다. 대신, 상태 변경 요청을 저장소에 추가하고, 리렌더링 과정에서 새로운 값을 설정하는 방식을 사용.
부모컴포넌트로부터 props로 상태를 받을수 있다. 상태를 받은 자식 컴포넌트는 props로 받은 상태를 직접 변경할 수 없다. 자식 컴포넌트에서 상태를 변경하려면 부모 컴포넌트로부터 상태를 변경하는 함수를 props로 받아와야 한다. 자식 컴포넌트에서 변경된 상태가 부모로부터 받은게 아닌 자식의 것이라면 자식만 리렌더링되고, 부모는 리렌더링되지 않는다. 부모로부터 받은 상태라면 부모 컴포넌트가 리렌더링되고, 자식 컴포넌트도 리렌더링된다.
