useState

🔶 React.useState(0);

→ 결과 : [state , setState 함수]

1. 첫번째 요소는 state임.

• state란 - 컴포넌트 내부에서 바뀔 수 있는 값.
• 설정해준 초기값 0이 나옴
• 어느 자료형이든 상관없음(객체,배열,문자,숫자 등 다됨)

2. 두번째 요소는 state를 바꾸는 setState함수.

: state값을 업데이트 시켜주고, 리렌더링을 일으킨다.
: 인자로 useState의 기존 state값이 들어감. (cur = 기존 state값)
: 리턴되는 값이 새로운 state값으로 업데이트 됨!

• setter(cur+1) 이렇게 값을 바로 넣어주는 것 보다,
• setter((cur) => cur+1) 이렇게 하는게 더 안전함.
  (현재 state를 바탕으로 다음 state를 계산하려 할 때, 현재 state를 확실히 받아올 수 있어서)

🔶 const [counter, setState함수] = React.useState(0);

• [counter, setState] = [0, setterFn]
• 비구조화 할당을 통해 각 배열 요소를 각각 변수로 할당해주는 것임.
  ( let counter = 0; let setState=setterFn 인 꼴)

🔶 state값이 바뀌면 해당 컴포넌트 자체는 자동으로 리렌더링 됨.

• setState함수 이용해서 컴포넌트의 state를 바꿀 때, 컴포넌트는 새로운 값을 가지고 다시 컴포넌트 전체가 다시 재생성되어 리렌더링 됨.

• React.js는 state값이 바뀌면 app 컴포넌트 자체를 자동으로 리렌더링해준다.
  하지만 전체가 리렌더링 되는게 아니라, '실제로 바뀌는 값'만 판단해서 리렌더링 됨.
  (불필요한 값은 리렌더링 하지x)

• 사용예제

function App() {
	const [count, setCount] = React.useState(0);
	const onClick = () => {
 	setCount((current) => current + 1); 
 	 };

  return (
  // {}은 언제 쓰는거? <-jsx코드(return 아래에 있는코드)의 html템플릿에서 자바스크립트 코드 쓸떈 {}써야 됨.
    <div>
    <h3>Totall click: {count} </h3>
    <button onClick={onClick}>Click me</button>
    </div>
  );
  }

  const root = document.getElementById('root');
  ReactDOM.render(<App />, root);