useState 딥다이브

안녕하세요 웹 프론트엔드 개발자 설탕시럽입니다.
React의 함수형 컴포넌트에서 상태관리 함수 "useState"에 대해 학습한 내용을 공유하려고 합니다.

 

 

useState?

useState는 React에서 상태 관리를 위해 React Hooks에서 제공되는 함수입니다. 이전까지는 클래스 기반 컴포넌트에서 this.state 를 통해 상태를 관리했었지만, 함수 기반 컴포넌트가 활성화 되고 React Hooks를 통해서 클래스 기반 컴포넌트처럼 상태를 관리할 수 있게 되었습니다.

useState는 배열을 반환하며, 반환하는 배열의 값은 다음과 같습니다.

• 첫 번째 원소 : 상태값을 저장할 변수
• 두 번째 원소 : 해당 상태값을 업데이트할 때 사용하는 함수

const [state, setStateFn] = useState(initialState);

여기서 주의해야할 점은, setStateFn 이 단순히 상태를 변경시키는 함수가 아니라는 점입니다. const로 선언된 상태가 변경되는 로직은 불가능 하기때문에 내부적으로 다른 방식으로 useState는 동작하게 됩니다.

 

 

원리

function useState(initialState) {
	var dispatcher = resolveDispatcher();
    return dispatcher.useState(initialState);
}

useState를 포함한 hooks는 모두 react 모듈에 선언되어 있는 함수고 이를 호출하여 사용하게 됩니다.

내부 로직에서는 실행 될 때마다 dispatcher를 선언하고 useState 메소드를 실행해서 그 값을 반환받습니다.

여기서 useState가 실행되는 위치에서는 전역으로 선언된 ReactCurrentDispatcher로 부터 값을 가져오고, 해당 위치에서 전역선언되어 있기때문에 접근 및 수정을 하게됩니다.

 

동작 순서

1. 웹이 로딩되고 포함되어 있는 함수형 컴포넌트 호출
   1. useState는 이때 호출되어, 가지고있는 initialValue를 전달,
   2. useState는 초기값을 전달 받고, 기존에 가지고 있던 값이 undefined 라면 초기값 적용.
   3. 이후 value와 setStateFn을 반환
2. setState를 호출해 상태 값에 변경 발생
   1. 변경된 값을 할당
   2. 컴포넌트 리-렌더링
3. 리-렌더링 후 컴포넌트 재 호출
   1. 재호출되고 initialValue를 전달
   2. 하지만 이미 기존에 가진값이 undefined가 아니기 때문에, 초기화 하지 않고 value와 setStateFn 반환

 

 

정리

setState를 실행하고, 상태가 바로 변경되지 않고 이전값을 그대로 유지한다
→ 리-렌더링이 되기 전까지 현재 상태는 유지된다