React - useState

컴포넌트에서 동적인 값을 상태(state)라고 부른다.

리액트에서는 useState라는 함수가 있는데 이걸 사용하면 컴포넌트에서 상태를 관리할 수 있다.

 

useState를 사용하면 상태의 기본 값을 파라미터로 넣어서 호출해준다. 이 함수를 호출해주면 배열이 반환되는데 

첫번째 원소는 현재 상태, 두번째 원소는 setter이다.

 

import React, {useState} from 'react';

function Counter(){
	//useState()안의 인수는 상태의 기본값을 뜻합니다.
    const [number, setNumber] = useState(0);
    const onIncrease = () =>{
        setNumber(prevNumber => prevNumber + 1);
    }
    const onDecrease = () =>{
        setNumber(number - 1);
    }
    return(
        <div>
            <h1>0</h1>
            <button onClick={onIncrease}>+1</button>
            <button onClick={onDecrease}>-1</button>
        </div>
    )
}

export default Counter;

 

 

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

function App() {
  return (
    <Counter />
  );
}

export default App;

 

 

---

벨로퍼트님의 리액트 강의를 듣고 작성하였습니다.