[리액트]nodebird 섹션1. - 리렌더링 이해하기

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

간격을 인라인으로 넣었는데, 이렇게 작성하면안된다.
리렌더링 될때마다 버추얼돔이 달라진것을 찾아서 리렌더링 해주는데 그럴때 마다 인라인으로 넣어준 style값때문에 달라진것으로 인식해서 리렌더링이 된다.({} === {} false 이기때문)
이럴때 styled-components를 써준다.

LoginForm.js

import styled from 'styled-components';
const ButtonWrapper = styled.div`
  margin-top:10px;
`
const LoginForm = () => {
	return(
      <ButtonWrapper>
        <Button type="primary" htmlType="submit" loading={false}>로그인</Button>
        <Link href="/signup"><Button>회원가입</Button></Link>
      </ButtonWrapper>
    )
}

styled.div 써주면, div태그로 된 ButtonWrapper 만들어진다.

성능에 크게 영향이 없다면, 인라인스타일로 작업해도 무방하다.

antd 태그에 스타일컴포넌트 넣기

 <Input.Search enterButton style={{ verticalAlign : 'middle' }} />

Input.Search 스타일컴포넌트를 주려면, 해당 태그를 그대로 넣어주면된다.

import styled from 'styled-components';

const SearchInput = styled(Input.Search)`
  vertical-align:middle;
`

useMemo style 값 주기(최적화)

useMemo 값을 캐싱

import React, { useState, useCallback, useMemo } from 'react';

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

리렌더링이 되면, 함수형 컴포넌트는 처음부터 다시 그려준다.
useCallback 은 캐싱이니, 이전컴포넌트, 다음컴포넌트가 [] 부분이 배열이 바뀌지않으면 다시 그리지 않는다.
만약에 바뀐다면, reutrn 부분을 다시 그리는게 아니라, 바뀐 부분만 다시 그린다.