[REACT] React.memo 사용하는 방법(성능 향상)

React.memo는 무엇일까?

: 고차 컴포넌트(Higher Order Component)를 말하며 컴포넌트를 렌더링하지 않고 마지막으로 렌더링된 결과를 재사용하는 작업을 수행하는 것

• React.memo는 props의 변화에만 영향을 준다.

 

페이지의 Header를 components폴더에 분리하여 작성하였는데 의도와는 다르게 page가 서버와의 통신 작업을 수행하는 횟수만큼 Header를 불러오는 것을 발견했다.

const Header = props => {

  const item = props.sharedItem
  console.log(item)

  return (
    <div css={HeaderCss} className="mb-3">
      <Row>
        <Col md="6" sm="auto" className="text-center m-auto">
          <br />
          <p>inthyes</p>
        </Col>
      </Row>
    </div>
  )
}

export default Header

한 페이지에 접근하였는데 5번이나 헤더가 출력을 찍어낸다.

성능을 운운할 개발 단계가 아니지만 이러한 (헤더가 5번 출력되는) 작업이 개발 후 성능에 대한 개선을 할 때 분명 문제가 될테니 먼저 memo로 처리하고자 했다.

(단순히 반복되는 렌더링을 방지하기 위한 목적으로 React.memo를 사용하는 것은 버그 발생을 야기할 수 있기 때문에 성능 향상을 목적으로 둔 경우에만 사용을 요한다.)

const Header = React.memo(props => {
  const item = props.sharedItem
  console.log(item)

  return (
    <div css={HeaderCss} className="mb-3">
      <Row>
        <Col md="6" sm="auto" className="text-center m-auto">
          <br />
          <p>inthyes</p>
        </Col>
      </Row>
    </div>
  )
})

export default Header

memo를 사용하면 아래와 같이 값이 변경될 때에만 렌더링을 수행한다.