useState 공식문서 스터디(1)

useState(initialState)

초기에 state를 설정할 값으로 모든 데이터 타입이 허용되고 초기 렌더링 이후에는 무시된다.

함수를 initialState로 전달하면 이를 초기화 함수로 취급한다. 이 함수는 반드시 어떠한 값을 반환해야 한다.

React는 컴포넌트를 초기화할 때 초기화 함수를 호출하고, 그 반환값을 초기 state로 저장한다.

 

-return (반환하기)

useState는 두 개의 값을 가진 배열을 반환한다.

 

useState는 훅이므로 컴포넌트의 최상위 레벨이나 직접 만든 훅에서만 호출할 수 있다. 반복문이나 조건문 안에서는 호출할 수 없다. 필요하다면 새 컴포넌트를 추출하고 state를 그 안으로 옮기면 된다.

Strict Mode 에서 리액트는 의도치 않은 상황을 위해 초기화 함수를 두번 호출한다. 초기화 함수가 변하지 않는다면 동작에 영향을 미치지 않는다.

 

useState가 반환하는 set함수를 사용하면 state를 다른 값으로 업데이트 하고 리렌더링을 촉발할 수 있다.

여기에서는 다음 state를 직접 전달하거나 이전 state로부터 계산하여 다음 state를 도출하는 함수를 전달할 수도 있다.

 

-매개변수(Parameters)

nextState : state가 될 값으로 함수를 nextState로 전달하면 업데이터 함수로 취급된다. 이 함수는 변하면 안되고, 대기중인 state를 유일한 인수로 사용해야 하며 다음 state를 반환해야 한다. 리액트는 업데이터 함수를 대기열에 넣고 컴포넌트를 리렌더링한다. 렌더링중에 리액트는 대기열에 있는 모든 업데이터를 이전 state에 적용하영 다음 state를 계산한다.

 

set함수는 반환값이 없다.

set 함수는 다음 렌더링에 대한 state 변수만 업데이트 한다.

set 함수를 호출한 후에도 state 변수에는 여전히 호출 전 화면이 있던 이전 값이 담겨있다.

사용자가 제공한 새로운 값이 object.js에 의해 현재 state와 동일하다고 인식하면 React는 컴포넌트와 그 자식들을 리렌더링 하지 않는다. << 이게 바로 최적화

경우에 따라 React가 자식을 건너뛰기 전에 컴포넌트를 호출해야 할 수도 있지만 코드에 영향을 미치지는 않는다.

 

React는 state 업데이트를 일괄처리한다. 모든 이벤트 핸들러가 실행되고 set 함수를 호출한 후에 화면을 새로고침 한다.

이렇게 하면 단일 이벤트 중에 여러번 리렌더링 되는 것을 방지할 수 있다. 

드물지만 DOM에 접근하기 위해 React가 화면을 더 일찍 업데이트 하도록 강제로 해야하는 경우, flushSync를 사용할 수 있다.

 

렌더링 도중 set 함수를 호출하는 것은 현재  렌더링 중인 컴포넌트 내에서만 허용된다.

React는 해당 출력을 버리고 즉시 새로운 state로 다시 렌더링을 시도한다. 이전 렌더링을 정보를 저장하는데 사용할 수 있다.

StrictMode에서 React는 오류를 예방하기 위해 업데이터 함수를 두 번 호출한다.