React hooks의 setstate

함수가 아닌 hooks를 만들어서 사용할 때 원래 class에서 사용했던 setState를 사용하고 싶을 수 있다.

 

setState가 호출되면 class 의 render()가 다시 실행되는 효과가 있다.

 

이걸 hook에서 사용하고자 하면

const Hooks = () => {
            const [first, setFirst] = React.useState(Math.ceil(Math.random() * 9));

            const onSubmitForm = (e) => {
                e.preventDefault();
                setFirst(Math.ceil(Math.random() * 9));
            };

            return (<>
                <div>{first}</div>
                <form onSubmit = {onSubmitForm}>
                    <button>입력</button>
                </form>
            </>
            );
        }

이렇게 작성될 수 있다 setState대신에 setFirst를 호출함으로써 Hooks 전체를 새롭게 렌더링 할 수 있다. 이때 한번 렌더링 할 때 react가 자동으로 새롭게 set하는 변수들을 모아서 한번에 처리해준다. (여러번 불려도 여러번 렌더링하지 않는다.)