React - setState와 useState

0.  state변경 시, 왜 setState, useState를 사용하는 이유

• state는 컴포넌트 렌더링에 영향을 주는 데이터를 갖고 있는 객체인데,
  이것을 업데이트 하기위해서는 setState, useState가 필요합니다.
  직접 state를 수정하면 리액트는 render 함수를 호출하지 않아서 렌더링이 일어나지 않고
  setState를 호출하여 state를 변경하면 리액트 엔진이 render 함수를 이용해서 렌더링을 실행하기 때문입니다.

1. setState()

setState(updater, [callback])
//콜백함수가 실행된 후 리렌더링 됨

• 컴포넌트는 현재의 this.state와 setState를 비교해서 업데이트가 필요한 경우에만 render 함수를 호출
• setState()는 컴포넌트의 state 객체에 대한 업데이트를 실행
• state가 변경되면, 컴포넌트가 리렌더링 됨
•  컴포넌트 state의 변경 사항을 대기열에 집어넣고,
  React에게 해당 컴포넌트와 그 자식들이 갱신된 state를 사용하여 다시 렌더링되어야 한다고 알립니다.
  이 메서드는 이벤트 핸들러와 서버 응답 등에 따라 UI를 갱신할 때에 가장 많이 사용하는 메서드입니다.
• 컴포넌트를 항상 즉각적으로 갱신하지는 않습니다.
  오히려 여러 변경 사항과 함께 일괄적으로 갱신하거나, 나중으로 미룰 수도 있습니다.
  따라서 setState()를 호출하자마자 this.state에 접근하는 것이 잠재적인 문제가 될 수 있습니다.
•  

//class

class DogAge extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      age: 0
    };
  }
  
  render() {
    return (
      <div>
        <p>You clicked {this.state.age} times</p>
        <button onClick={() => this.setState({ count: this.state.age + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

2. useState()

• 리액트 16.8 에서 Hooks 라는 기능이 도입되면서 함수형 컴포넌트에서도 상태를 관리가능
• 리액트 Hooks 중 하나인 useState 함수

import React, {useState} from "react"

function DogAge(){
	const [age, setAge] = useState(0)
      //[state, state 변경함수] = useState(초기값)
      
      
     return(
     <button onClick = {()=>{setAge(age + 1)}}>Click Add Age!</button>)
}

3. setState()와 useState()가 비동기적으로 작동하는 이유

1. state 값이 변경되면 리렌더링이 발생
2. 변경이 많아진다면 잦은 렌더링이 발생하고 속도가 저하됨
3. 따라서 변경된 값들을 모아 한번에 업데이트를 진행하여 렌더링을 줄이고자
   배치(Batch)기증을 사용해 비동기로 작동함
4. 배치 업데이트는 16ms주기

***React v18에서 변경된 Automatic Batching

• React-18v 부터 상태 업데이트(setState)를 하나로 통합해서 배치처리를 한 후 리렌더링을 진행합니다.
  • 리렌더링 관련 성능 개선