리렌더링 이해하기(인라인 스타일을 쓰지 말아야 하는 이유)

스타일에 객체를 넣으면 안되는 이유는 무엇일까?

예시코드

      <div style={{ marginTop: 10 }}>
        <Button type="primary" htmlType="submit" loading={false}>
          로그인
        </Button>
        <Link href="/signup">
          <a>
            <Button>회원가입</Button>
          </a>
        </Link>
      </div>

{} === {} 는 false이기 때문이다.

객체끼리 비교하면, 무조건 false가 나온다.
리액트는 vulture dom으로 검사를 하면서 어디가 달라졌는지 찾다가
이전 버전과 현재 버전을 비교해 달라진 부분을 리렌더링 한다.
즉, 변한 것이 없어도 객체끼리 비교하면 늘 false가 나오므로, 다르다고 간주하여
리액트는 리렌더링을 해버린다.

해결방법

styled-components를 쓰거나, useMemo를 쓴다.

useMemo로 해결하는 법

 const styled = useMemo(() => ({ marginTop: 10 }), [])
 
 return (
   <div style={styled}>
     <Button type="primary" htmlType="submit" loading={false}>
       로그인
      </Button>
      <Link href="/signup"><a><Button>회원가입</Button></a></Link>
   </div>
 )
 

✔ useCallback : 함수를 캐싱한다
✔ useMemo : 값을 캐싱한다