[React] React Hook: useState()

리액트의 함수형 컴포넌트에서 상태를 사용하는 방법 : Hooks

• 가상 돔의 메커니즘을 이용하여 setState()처럼 내가 제공한 함수(Hooks)를 이용해서 상태를 관리
• 함수(Hooks)를 다시 호출하여 재렌더링 할 수 있음

 

useState(): 리액트가 제공하는 상태관리 로직 함수

• 항상 2개의 값을 가지는 배열을 반환
• (2)[값, 함수]
• 첫번째 인자: useState()를 호출할 때 주는 값이 들어감
• 두번째 인자: useState()를 호출 할 때 주었던 값을 바꾸고 싶을 때 사용하는 함수
  • 클래스 컴포넌트에서의 setState()와 같은 역할을 함
  • 두번째 함수가 호출되면, 상태를 바꾸려고 한다는 것을 리액트가 알게 되고
  • 리액트의 재 랜더링 로직이 돌아갈 수 있도록 함

import { useState } from 'react';
export function CounderFn(props) {
  // 구조분해할당 const [a,b] = [1,2]
  // 구조분해할당 const {a,b} = {a:1,b:2}
  const [count, updateCount] = useState(1);
  console.log(props);

  function onIncrement() {
    updateCount(count[0] + 1);
    console.log('onIncrement', count);
  }

  return (
    <div>
      <h2>함수 컴포넌트 카운터 </h2>
      <div>
        <h3>{count[0]}</h3>
        <button onClick={onIncrement}>증가</button>
      </div>
    </div>
  );
}