react study / 컴포넌트에서 값 받아 바꾸기

Counter.js

import React from 'react';
import { useState } from 'react';

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

    const onIncrease = () => {
        setNumber(prevNumber => prevNumber + 1);
    }

    const onDecrease = () => {
        setNumber(prevNumber => prevNumber- 1);
    }

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


        </div>
    )
}

export default Counter;

매우 쉬운 예제! 한번 해보자

버튼을 달아주고 누르는대로 숫자 바꾸기

onClick 이번트를 넣어준다

 

on이벤트이름 = {실행하고자 하는 함수}

함수 "이름"을 넣어주는것이다

 

useState는 리액트 패키지에 있는 함수이며 import해 사용한다

이것을 이용하면 컴포넌트에서 상태를 관리할 수 있다고 한다

 

배열로 반환되는데 첫번째 원소(number)는 현재상태, 두번째 원소는 Setter함수라 한다

그러니까 배열이 이런 느낌...

 

useState(0)

[0]	number
[1]	setNumber