3. 리액트 State

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

 

나의 첫번째 훅

useState(초기값) 

useState() : 배열반환 

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

 

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

 

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

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

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

 

const StateComponent = () => {

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

    const enter = () => setData('입장했습니다')
    const exit = () => setData('퇴장했습니다')

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

}