useState를 통해 컴포넌트에서 바뀌는 값 관리하기, 화살표함수

import React, { useState } from 'react';


function Counter(){
    const [number, setNumber] = useState(0); // 비구조화 할당을 통해 number라는 상태를 만들텐데 상태를  파라미터값: 0으로 하겠다, setnumber는 상태를 바꿔주겠다 
    const onIncrease = () => {
        setNumber(prevNumber => prevNumber + 1);
    }
    const onDecrease = () => {
        setNumber(number - 1);
    }

    return(
        <div>
            <h1>{number}</h1>
            <button onclick={onIncrease}>+1</button>
            <button onclick={onDecrease}>+1</button>
        </div>
    )
}


export default Counter;

1) import 부분에 useState 구문 추가 

 

const [ number, setNumber ] = useState(0);

 

비구조화 할당을 통해 number라는 상태를 만드는데

만든 상태를 파라미터값 : 0으로 하겠다. 만약, 파라미터가 0이 아니라 5로 바뀐다면 초기화가 5로된다.

setNumber는 상태를 바꾸겠다.

 

2) 화살표 함수를 통해  함수를 선언

const add = (a, b) => {
  return a + b;
};

console.log(add(1, 2));

function 키워드 대신에 => 문자를 사용해서 함수를 구현한다

화살표의 좌측에는 함수의 파라미터, 화살표의 우측에는 코드 블록이 들어온다.