리액트 10강

• state
  • 일반 JavaScript 객체, 렌더링 결과물에 영향을 주는 정보를 갖고 있는데, 함수 내에 선언된 변수처럼 컴포넌트 안에서 관리됨
  • 사용자와의 상호작용을 통해 화면이 바뀌는 경우에 useState 를 사용 하여 "상태 관리"를 가능하게 하는 객체 

import React, { useState } from "react"; // import useState
//useState라는 것을 통해서 react의 state라는 것을 만들 수 있음
function Counter() {
    const [number, setNumber] = useState(0); 
    //숫자의 값을 만드는 부분, useState함수 사용
    //기본값을 입력으로 받음, 이 기본값은 state가 가지게 될 기본값
    //기본값을 받아 배열을 리턴
    //number -> state를 나타내는 변수, setNumber->변수의 값을 바꿀수있는 setter함수
    //number라는 변수를 바꾸기 위해서는 setNumber라는 함수를 사용해야 한다는 뜻
    const onIncrease = () => {
        setNumber(number + 1); //number + 1한 값을 number에 할당한다
    };
    const onDecrease = () => {
        setNumber(number - 1);
    };
    return (
        <div>
            <h1>{number}</h1>
            <button onClick={onIncrease}>+1</button>
            <button onClick={onDecrease}>-1</button>
        </div>
    ); //number가 변수로 지정되어 있음, 변수값이 달라지면 화면에 나오는 수도 달라짐
}
export default Counter;