[React] 리렌더링 이해하기, 더미 데이터로 로그인하기

이 글은 인프런 제로초님의 '[리뉴얼] React로 NodeBird SNS 만들기' 를 바탕으로 정리한 내용입니다.

antd 사용해 SNS 화면 만들기 > 리렌더링 이해하기

<div style={{marginTop:10}}>

스타일에다가 객체를 넣으면 안된다.

{} === {} // false

객채와 객체를 비교하면 false 가 다음과 같지 나온다. 모양은 똑같지만 서로 다르다.

바로 이러한 이유 때문에 스타일에 객체를 넣으면 리렌더링이 된다. 리액트는 버츄얼 돔을 통해 이전과 다른 객체가 있을 경우 새로 렌더링한다. 버츄얼 돔에서 바뀐 부분을 알려주고, 다시 그려준다. 리렌더링 된 것 중에서 실제로 달라진 게 있는지 확인한다. 여기서 가장 많이 하는 실수 중 하나가 인라인 스타일링이다. 이럴 때 스타일드 컴포넌트를 사용하면 된다. 인라인 스타일링을 사용할 경우 리렌더링 할 때 최적화가 되지 않는다.

Q. 스타일드 컴포넌트 싫을 때?
→ useMemo 를 사용할 수 있다.

Q. useMemo, useCallBack의 차이?
→useCallBack 는 함수를 캐싱하는 것이고 uesMemo는 값을 캐싱하는 것이다.

const style = useMemo(() => ({ marginTop: 10}), []);

antd 사용해 SNS 화면 만들기 > 더미 데이터로 로그인하기

onFinish={onSubmitForm}

onFinish 자동으로 e.preventDefault 가 적용되어있다. (엔트디자인에서는..!)

const onSubmitForm = useCallback(() => {
        console.log(id, password)
        setIsLoggedIn(true);
    }, [id, password])

컴포넌트에다 넣는 것이므로 useCallback으로 감싸준다. 백엔드 없이도 가상의 state를 만들어놓고, 활용할 수 있다. 다만 스타일드 컴포넌트는 변수 명 짓기가 어렵다는 단점이 존재한다.

느낀점

인라인 스타일을 할 때마다 새로 객체를 그려주는지 전혀 몰랐다 😱 앞으로 사용에 유의해야 되겠다.

https://ko.reactjs.org/docs/hooks-reference.html