Published on

리액트 공식문서 스터디 10-1 주차

Authors
  • avatar
    Name
    junyeol kim

React Compiler?

  • React Compiler는 React App을 자동으로 최적화 해주는 새로운 빌드 타임 도구 이다.

  • React는 최적화 없이도 충분히 빠르지만, App을 업데이트하기 위해 컴포넌트의 값들을 기억해둬야 하는 경우가 있다.

  • 이러한 메모이제이션 과정은 수동으로 코드를 작성해야하기 때문에, 누락하거나 추가적인 코드 작성이 필요해
    번거로움이나 실수를 유발할 수 있다.

  • 이러한 문제점들을 React Compiler이 보완할 수 있다.

Before React Compiler

  • React Compiler이 탄생하기전 우리는 코드를 어떻게 작성했을까?

  • 아래 코드와 같이 메모이제이션을 위해 useMemo, useCallback, memo를 사용하여 코드를 작성했을 것 이다.

import { useMemo, useCallback, memo } from 'react'

const ExpensiveComponent = memo(function ExpensiveComponent({ data, onClick }) {
  const processedData = useMemo(() => {
    return expensiveProcessing(data)
  }, [data])

  const handleClick = useCallback(
    (item) => {
      onClick(item.id)
    },
    [onClick]
  )

  return (
    <div>
      {processedData.map((item) => (
        <Item key={item.id} onClick={() => handleClick(item)} />
      ))}
    </div>
  )
})

NOTE

  • 성능최적화를 하려고, useMemo, useCallback, memo 을 쓰다가 오히려 메모이제이션이 망가지는 코드를 짜기 쉽다.
  • 예를 들어, useCallback으로 함수를 고정시켰는데, 컴포넌트에서 다시 화살표 함수로 감싸면 렌더마다 새로운 함수를 만들게 되는 경우
  • 위와같은 경우들을 React Compiler는 코드를 분석해서, 화살표 함수가 있어도 실제로 의미 있는 변경이 없으면 재렌더를 막는 메모이제이션을 자동으로 적용한다.

After React Compiler

  • React Compiler을 사용하면 아래와 같이 수동적으로 메모이제이션 할 필요 없이 최적화를 할 수 있다.
function ExpensiveComponent({ data, onClick }) {
  const processedData = expensiveProcessing(data)

  const handleClick = (item) => {
    onClick(item.id)
  }

  return (
    <div>
      {processedData.map((item) => (
        <Item key={item.id} onClick={() => handleClick(item)} />
      ))}
    </div>
  )
}

The kinds of memoization that React Compiler automatically adds

  • Optimizing Re-renders

    • 부모가 리렌더 되었을 때, 자식 요소까지 리렌더 되는 것을 방지한다.

  • Expensive calculations also get memoized

    • 컴포넌트, 훅 안에서 계산하는 무거운 로직들을 재사용할 수 있다.

useMemo, useCallback, memo 🤔

  • React Compiler로 인해 위 메서드들은 필요가 없을까?

  • 기존 코드들은 유지하고 새로운 코드 작성시 React Compiler을 사용

  • 예외적으로 useMemo, useCallback, memo가 필요할 수 있음

React Compiler approaches to incremental adoption

Babel overrides

Opt-in with “use memo"

Runtime gating

Previous

jest 란?

Next

useActionState