#3 State

기존의 바닐라 자바스크립트에서 화면을 업데이트할 때는 바꿔야하는 엘리먼트가 전부 다시 렌더링 된다

리액트를 사용하면 바뀌는 부분만 검사해서 바꾼다.

인터랙티브한 개발을 할 때 유리하게 작용함

리렌더링을 해야 할 때 마다 ReactDOM.render()함수를 직접 호출하는건 너무 힘들다.

리액트에서는 state를 활용해서 이 값이 바뀔때마다 해당state를 가지고 있는 컴포넌트를 리렌더링 해준다.

const [counter, setCounter] = React.useState(0);

state는 read-only variable이고 오로지 특정함수를 통해서만 수정할 수 있다.

즉 state를 바꾸는 특정함수를 호출할 때만 컴포넌트는 바뀐부분만 검사하여 리렌더링된다.

현재 state값을 기준으로 바꿔주고 싶다면 콜백함수를 이용하는게 안전하다

						onClick={() => {
							 setCounter(counter + 1);
							 setCounter(counter + 1);
						}}

						onClick={() => {
							 setCounter((counter) => counter + 1);
							 setCounter((counter) => counter + 1);
						}}

위의 두개가 같아보이지만 실제로 위의 코드는 클릭해도 counter가 1씩 증가하고

아래 코드는 2씩 증가한다.

state가 비동기적으로 값이 변한다고 추측됨

jSX가 html과 비슷해서 사용하기 편하지만 완전히 같지는 않다

attribute로 자바스크립트 예약어를 사용하면 안된다

<div class="className"></div>
<label for="input"></label>
<input id="input"><input> 

<div className="className"></div>
<label htmlFor="input"></label>
<input id="input"><input>