리액트가 렌더링하는 방식

메론맛캔디·2021년 10월 28일

기술면접 리액트

기술면접

목록 보기

11/30

언제 렌더링을 할까?

props가 변할 때
state가 변할 때
forceUpdate()를 실행할 때
부모 컴포넌트가 렌더링될 때

컴포넌트에서 렌더링 결과에 전혀 영향을 미치지 않는 변화가 일어나면 불필요한 렌더링이 발생하게 된다.

렌더링 과정에서 수행하는 로직이 많을수록 더 많은 컴포넌트를 출력할 수록 악영향을 끼칠 확률이 높아진다.

인라인 스타일링

인라인 스타일을 사용하면 코드도 깔끔하지 않고 불필요한 리렌더링을 발생시킨다.

객체의 메모리 주소값은 항상 다르다. 따라서 가상돔에 변화가 일어났다고 인식을 하게되고, 불필요한 리렌더링이 발생하게 된다.

{} === {} // false

불필요한 리렌더링을 방지하기 위해서는

styled-components를 사용할 수 있다.
Antd와 같은 UI라이브러리를 사용할 때 보통 커스텀을 해서 사용하게 되는데, 인라인 스타일로 원래의 CSS 속성을 덮어씌우면 불필요한 리렌더링이 발생하게 된다.
craco.config.js를 만들어서 클래스명을 가져와 덮어씌우는 방법도 있지만, styled-components를 사용하면 인라인 스타일을 사용하지 않고 쉽게 커스텀할 수 있다.

import React from 'react';
import styled from 'styled-components';
import { Button } from 'antd';

const StyledBtn = styled(Button)`
  color: red;
`;


const App = () => {
  return <StyledBtn type='submit'>버튼</StyledBtn>
}
export default App;

또는

useMemo를 사용할 수 있다.
useMemo훅을 이용해서 이전에 한 번 사용한 값을 재사용할 수 있다. 필요한 스타일 객체를 캐싱해놓고 재사용 하면 이미 기억하고 있는 객체이기 때문에 메모리 주소값이 변하지 않아 불필요한 리렌더링이 일어나지 않는다.

import React, { useMemo } from 'react';
import { Button } from 'antd';

const App = () => {
  const buttonStyle = useMemo(() => ({ color: 'red' }), [])

  return (
    <>
      <Button style={buttonStyle}>버튼</Button>
    </>
  )
}
export default App;