State란

1. 리액트에서 state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미합니다
2. state가 체인지 되면 변화를 감지하여 리렌더링을 수행합니다.
3. 클래스 vs 함수형 컴포넌트에서 사용하는 방법이 다릅니다.
4. 함수형 컴포넌트에서는 훅 Hook개념을 이용해서 더욱 쉽게 사용 가능 합니다.

나의 첫번째 훅

useState(초기값) - 함수(hook)

useState() : 배열반환

첫번째 배열의 요소에는 현재값을, 두번째 요소는 상태를 변경하는 (setter) 를 반환합니다.

const [data, setData] = useState('초기값')

state는 어떤 타입이던 상관 없습니다. (str, number, object, array, boolean… )

state는 여러개 일 수도 있습니다.

state는 직접 수정하면 안 됩니다. setter를 사용하세요!

잘못된 코드

const StateComponent = () => {

    const [msg, setData] = useState('초기값')

		const exter = () => {
				msg = '나는 이렇게 바꿀꺼야!'; //error!!!!	(렌더링 x)	
		}

		return (
        <div>
            <h3>{msg}</h3>
            <button onClick={enter}>입장</button>
        </div>
    )

}