state

1. state 이해하기.

function countUp() {
        counter += 1
        render();
    }
function render() {
        ReactDOM.render(<Container />, root);
const Container = () => (
        <div>
            <h3>Total clicks: {counter}</h3>
            <button onClick={countUp}>Click me</button>
        </div>
    );
render();

여기서 countUp 이라는 함수는 counter 이라는 숫자를 1씩 증가.
Container은 html 요소들을 띄워주며, 이때 {변수} 를 넣어줄 수 있다. onClick={함수이름} 은 클릭 시 함수가 실행된다는 뜻.
바닐라에서는 innerText로 클릭할때마다 html을 새로고침해줬지만, 리액트는 변수가 변할때마다 render됨.
이때, render 호출 시 바뀐 부분만 새로 생성

state 는 컴포넌트에서 변할 수 있는 값. 값이 변하면 렌더링이 일어난다. 즉, 각각의 렌더링에서 함수 안의 state는 상수이자 독립적인 값으로 존재한다.

---

2. useState

const [state, setState] = React.useState(초기값);

• state 는 data[0] , setState 는 data[1]로, setState는 state를 변경할 수 있는 함수 이다.
• useState는 반드시 컴포넌트 안에서 사용해야 한다.
• setState 함수는 비동기 함수이다.

이때 setState 는

const Click = () => {
            setCounter(counter + 1); //직접 값 설정
            setCounter((current) => current + 1);
  			// 함수 전달
        }

직접 값을 설정해주어도 되지만 함수를 전달하는 방법을 사용해야 안전하다.

---

https://basemenks.tistory.com/287
https://velog.io/@devmag/React-state-%EB%B3%80%EA%B2%BD-%EC%8B%9C-%EC%99%9C-useState-setState%EB%A5%BC-%EC%93%B0%EB%8A%94%EA%B0%80