section1. 2-2. class와 hooks 비교하기

차이점은 class보다 hooks가 좀 더 간결하다.

 

리렌더 시 차이점

hooks를 사용하면 해당 함수 자체가 재실행된다.

const Gugudan = () => {
	...
}

Gugudan() 함수가 재실행 된다고 생각하면 됨. 하지만 class 컴포넌트를 사용하면 render()함수만 재실행 되었다.

그래서 리렌더 시 hooks를 사용한 함수 컴포넌트가 좀 더 느릴 순 있다.

 

JSX에서 HTML 태그와 차이점

class -> className

for(label) -> htmlFor

 

setState가 여러 번 동시에 일어날 경우?

그렇게되면 리랜더가 여러 번 일어나는 것 아니냐는 걱정 섞인 댓글이 있었다.

하지만 이러한 경우 React가 알아서 setState를 모아서 한번에 처리 후 리랜더는 한번만 일어난다고 한다.

const onSubmit = (e) => {
                e.preventDefault();
                const ans = first * second;
                if(parseInt(value) === ans){
                    setFirst(()=>Math.ceil(Math.random() * 9));
                    setSecond(()=>Math.ceil(Math.random() * 9));
                    setValue(()=>'');
                    setResult(()=>`정답 ${ans}`);
                }else{
                    setResult(() => `땡`);
                    setValue(()=>'');
                }
                inputRef.current.focus();
            }

이렇게 setFirst, setSecond, setValue, setResult 처럼 동시에 state 변경을 여러 번 하면 리랜더가 여러번 일어날 줄 알았지만 React가 setState관련 함수를 모아서 한번에 처리하기 때문에 리랜더는 한번만 일어난다고 한다.