한입 크기로 잘라 먹는 리액트 - State

State

: 계속해서 변화하는 특정 상태, 상태에 따라 각각 다른 동작을 함

 

웹사이트에서 흔히 사용하는 Dark Mode, Light Mode들도 상태이다. 

react에서 말하는 상태, state는 컴포넌트가 가진 테마처럼 계속 값이 바뀔 동적인 데이터이다. 

그 상태를 관리는 이걸 가진 컴포넌트가 직접 관리한다. 

 

import React,{useState} from "react";
//상태를 사용하겠다고 메소드를 추가하기

 

const Counter = ()=>{
    console.log(props);

    //기본값이 0에서 출발
    //1씩 증가하고 
    //1씩 감소하는 
    //count상태 

    console.log("counter 호출!");
	//컴포넌트가 가진 state가 변화하면 함수를 다시 호출한다 => 리랜더함
    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>
        );
};

컴포넌트의 state가 변화하면 함수를 다시 호출한다. 

이것을 리랜더링이라 한다.