728x90
함수가 아닌 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하는 변수들을 모아서 한번에 처리해준다. (여러번 불려도 여러번 렌더링하지 않는다.)
728x90
'웹개발 > react' 카테고리의 다른 글
react 에서 export 하기 변수/class , import /require (0) | 2020.11.11 |
---|