React Hooks - useState

jiny·2022년 9월 5일

React hooks

목록 보기

1/6

React의 State

그 전에 Vanila Javascript

데이터 변경이 있는 웹 페이지를 만드는 경우
페이지에 있는 데이터 부분이 변경 되었을 때 마다 DOM에 접근하여 수정
→ 데이터가 변경 된 만큼 사용자가 보는 화면도 변경되어야 하기 때문

React

변경된 데이터로 업데이트 시 state를 jsx를 안에 넣는 형태

데이터 바인딩

JS → 여러 개의 js 객체와 화면에 있는 데이터를 직접 일치 시킴

제공자와 소비자로 부터 데이터 원본을 결합시켜 이것들을 동기화 하는 기법
리액트는 데이터 바인딩을 대신 해주기 때문에 좀 더 간편한 구조
또한, 단방향 데이터 바인딩을 지원 → 데이터와 템플릿을 결합해 화면을 생산

state - 자동으로 관련된 화면은 리 렌더링 시킴

React의 단방향 데이터 바인딩

리액트 에서는 하향식으로 데이터가 흐르게 됨
컴포넌트를 자신의 state를 자식 컴포넌트에게 props로 전달
자식 컴포넌트를 설계 시 자식은 props가 누구로 부터 어떤 방식으로 전달되는지 알 필요 없음 → 받기만 하면 됨 → 캡슐화(state를 가진 컴포넌트 외에는 접근 x)

props와 state의 차이점

state가 물의 근원이라면 props는 폭포와 같음

state

state를 갖고 있는 해당 컴포넌트에서 관리

props

state를 자식 컴포넌트에게 넘겨주는 것
읽기 전용 데이터로써 immutable(불변성)의 성질을 가짐

함수형 컴포넌트의 useState

함수형 컴포넌트

이제 리액트는 클래스형 컴포넌트 → 함수형 컴포넌트로 넘어가는 형태
함수형 컴포넌트는 가끔 stateless 컴포넌트로도 불림

useState

state 값을 저장하기 위해 hook의 useState를 활용하게 됨
useState를 통해 함수형 컴포넌트에서도 state를 사용할 수 있게 됨

useState는 다음 리 렌더링시 배열의 첫 번째 요소로 갱신된 최신 state를 반환

보통 useState를 통해 state를 만들면 const로 선언
state는 변경이 되는 값인데, const 변수는 값이 변경되면 안된다?

사실 setState를 통해 state를 변경하는 것이 아님
useState 함수 안에서 접근 할 수 있는 변수 값을 변경
useState 내부에는 접근할 수 있는 변수의 값을 업데이트 하고, 이를 배열에 나눠 반환
함수형 컴포넌트가 실행되면 state 변수는 사실상 계속 할당 됨

React의 useState 동작 원리

useState 살펴 보기

node_modules/react/cjs/react.development.js 내 hooks 함수

useState는 dispatcher라는 인스턴스를 생성
인자로 초기값을 받아 dispatcher.useState에 전달 후 반환값을 return

즉, dispatcher의 메서드인 useState에 초기값을 전달하면 배열을 반환하며 그 안에 state와 setState가 있다는 것

resolveDispatcher

dispatcher가 없다면 error를 반환하고 그게 아니면 dispatcher를 리턴

ReactCurrentDispatcher

전역에 선언
속성으로 current(dispatcher가 담길 곳)를 가지고 있음

정리

useState를 포함한 hooks는 React 모듈에 선언된 함수들

실행 될 때 마다 dispatcher 인스턴스 생성 후 useState 메서드를 실행하여 그 값을 반환

dispatcher는 전역 변수 ReactCurrentDispatcher로부터 가져옴

useState가 상태 변경 시키는 과정

App 컴포넌트 함수는 실행 시 useState를 호출 후 반환 값을 구조 분해 할당으로 추출해 변수에 저장
setState는 App 함수에 선언된 state가 아닌 자신이 선언된 위치에서 접근 할 수 있는 _value를 변경

과정 살펴보기

1. 브라우저에서 어플리케이션이 로딩되고 최초로 App 함수가 호출

App은 인수로 0을 전달 후 useState 호출
useState는 실행될 때마다 초기값을 전달 받지만, 내부적으로 _value 값이 undefined 인지 확인 후 최초 호출엔 초기값을 _value에 할당, 이후 초기값은 사용되지 x
이후 _value와 그 값을 재할당하는 setState 함수를 배열에 담아 반환

2. setState 호출