React state 기초

state가 변화하면 페이지가 리렌더링 되어 새로 호출 된다.

//App.js

import React from 'react';
import Counter from './Counter';

function App() {


  return (
    <div>
      <Counter/>
    </div>
  );
}

export default App;


// Counter.js

import React, {useState} from 'react';

const Counter = () => {
    const [count, setCount] = useState(0);

    const onIncrease = () => {
        setCount(count + 1);
    }

    const onDecrease = () => {
        setCount(count - 1);
    }

    return (
        <div>
            <h2>{count}</h2>
            <button onClick={onIncrease}>+</button>
            <button onClick={onDecrease}>-</button>
        </div>
    )
}

export default Counter;

1 state를 쓰기 위해서는 Counter.js에 import React, {useState} from 'react' 를 한다. 이것을 사용하겠다는 의미. 이것이 없으면 사용 불가.
2 내가 사용하려는 함수 안에 const [count, setCount] = useState(0) 를 써준다. 초기값은 useState() => 괄호 안에 써준다.

*count는 useState에서 초기화로 설정한 괄호 안의 값으로 시작한다. uesState를 비구조화 하여 count는 0번째 인덱스, useState는 1번째 인덱스를 가져온다.