리렌더링과 인라인 스타일

리렌더링

리엑트에서 리렌더링이 되면 return 밑 부분을 처음부터 실행하지만 바뀐 부분만 다시 그리게 된다.(return 부분이 virtual dom이다.) 

만약 리렌더링 되었을 때, 모든 화면을 다시 그려준다면 개발자들이 리엑트를 사용하지 않을 것이다.

번외로 useCallback은 함수를 캐싱하는 것이고 useMemo는 결과를 캐싱하는 것이다.

인라인 스타일

코딩을 하다보면 인라인 스타일을 많이 쓰게 된다. 이런 방식은 지양하는 것이 좋다.

왜냐하면 객체는 "{} === {}"을 하면 false가 나온다. 그렇기 때문에 리렌더링하면 인라인 스타일 부분을 사용한 곳을 다시 그리게 된다.

해결법으로는 styled-components, emotion.js 등 같은 js-in-css를 사용하면 된다.

 

ant Design에서 인라인 스타일 지양하는 법

-styled component를 사용(권장)

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

Input.Search를 인라인 스타일을 안하고 사용하기 위해서 styled-compoenents를 활용해 준 코드이다. 

styled(Input.Search) 이렇게 해서 커스텀 해주면 된다.

 

-useMemo 사용하는 법

  const style = useMemo(
    () => ({
      marginBottom: "20px",
      border: "1px solid #d9d9d9",
      padding: "20px",
    }),
    []
  );

  return (
    <Form style={style}>
      <Input.Search addonBefore={"닉네임"} enterButton={"수정"} />
    </Form>
  );

useMemo를 사용해서 리렌더링이 되었을 때 다시 그리지 않도록 한다.