<React> useState

State는 컴포넌트의 인스턴스별로 나뉘어져 있다.

인스턴스

Javascript를 예시로 들어보면, 생성자 함수로 생성한 객체를 인스턴스라고 생각하면 된다.

Constructor(생성자 함수) = 붕어빵 틀
Instance(생성자 함수로 만들어진 객체) = 붕어빵

컴포넌트의 인스턴스?

• 클래스로 선언된 컴포넌트들만 인스턴스를 가지는데, 이것을 컴포넌트 인스턴스라고 부른다. (Component Instance)
• 컴포넌트 클래스의 내부에서 this 키워드를 통해 참조하는 대상에 해당.
• 개발자가 직접 생성하거나 수정, 삭제 등 다룰 일은 없음. React가 알아서 해준다.
• 지역 상태를 저장하고 생명 주기 이벤트들에 대한 반응을 제어할 때 매우 유용하다.
• 함수형 컴포넌트는 인스턴스를 갖지 않음.

useState는 비동기로 작동하는가?

• 그렇다. useState는 비동기적으로 동작한다.
• 하나의 이벤트 핸들러 함수 내에서 같은 setState가 호출되면, 마지막에 실행한 setState가 실행되어 렌더링 된다.

  const somethingHandler [state, setState] = useState()

Q. 이 코드가 동기적이라면 어떻게 작동하고, 비동기적이면 어떻게 작동해야 하는가?

const [count, setCount] = useState(0)

const countHandelr = () => {
    setCount(prev + 1)
    setCount(prev + 2)
  }

A. 만약 동기적이라고 하면 순차적으로 함수가 실행되어 count에 3씩 더해져서 핸들러가 실행될 때 마다 3, 6, 9 ... 3의 배수로 커질 것이다.

하지만 useState는 비동기적으로 작동하고, 동일한 state를 연속적으로 처리하는 업데이트하는 경우에는 변경사항을 모아서 한 번에 일괄처리(batch)하게 된다.

최종적으로 한 번만 setState를 실행하게 되고, 마지막 setCount(prev + 2) 함수만 실행될 것이다.

일괄적인 batch update를 통해서 컴포넌트의 렌더링 횟수를 최소화할 수 있게 된다.
이로써 불필요한 렌더링을 방지하고, 더 빠른 속도로 동작할 수 있다.

⭐️ useState 특징 기억하기

1. 비동기적으로 동작한다.
   
2. 동일한 state를 연속적으로 처리하는 업데이트하는 경우에는 변경사항을 모아서 한 번에 일괄처리(batch)하게 된다.
   
3. 최종적으로 동일한 setState가 호출되면 한 번만 setState를 호출하고, 마지막 함수만 실행하게 된다.
   
4. 일괄적인 batch update를 통해서 컴포넌트의 렌더링 횟수를 최소화할 수 있게 된다.
   이로써 불필요한 렌더링을 방지하고, 더 빠른 속도로 동작할 수 있다.