React는 개발 중에 태그 내부의 구성 요소를 두 번 렌더링합니다. 즉 렌더링 로직이 실행되는 횟수가 커밋된 렌더링 패스의 횟수와 같지 않으며, 렌더링하는 동안 발생한 렌더링 수를 계산하기 위해 의존할 수 없습니다. REactDevTools Profiler를 사용하여 추적을 캡처하고 커밋된 렌더링의 전체 수를 계산하거나, hook 또는 라이프 사이클 내부에 console.log 로깅을 추가합니다. 이렇게 하면 React가 실제로 렌더링 패스를 완료하고 커밋했을 때만 로그가 출력됩니다.

렌더링 중 상태 설정

일반적인 상황에서는 실제 렌더링 로직에 있는 동안 상태 업데이트를 큐에 넣어서는 안 됩니다. setState()이 호출되면 콜백을 만드는 것은 괜찮지만 실제 렌더링 동작의 일부로 호출해서는 안 됩니다.

그러나 하나의 예외가 있는데, 함수 컴포넌트는 조건부로 수행되고 컴포넌트가 렌더링될 때마다 setState()가 호출되지 않는 한 렌더링하는 동안 직접 호출할 수 있습니다. 함수 컴포넌트가 렌더링하는 동안 상태 업데이트를 대기열에 넣으면 React는 상태 업데이트를 즉시 적용하고 진행하기 전에 해당 컴포넌트를 동기적으로 리렌더링합니다. 컴포넌트가 상태 업데이트를 무한히 대기열에 넣고 React가 리렌더링을 강제하는 경우 React는 현재 설정된 횟수(현재 50회) 후에 루프를 중단하고 오류를 throw합니다.

렌더링 성능 향상시키기

렌더는 리액트 작업 중 평범한 작업으로 여겨질지라도 렌더 작업은 시간이 소요되는 작업입니다. 컴포넌트의 출력이 변경되지 않고, DOM의 일부가 업데이트할 필요가 없다 해도 컴포넌트 렌더 작업은 낭비되는 시간이 됩니다.

React 컴포넌트 렌더링 출력은 전반적으로 current props와 current component state에 기반합니다. 그러므로 컴포넌트 props, state가 변경되지 않은 그 시점을 알고 있다면, 렌더 출력 결과는 같을 것입니다.

소프트웨어 성능 향상을 하기 위한 기본적인 두 가지 접근 방법

1. 같은 작업을 빠르게 하라

2. 작업을 적게 하라. React rendering을 최적화 하는 것은 덜 작업하게 하도록 하는 측면에서 매우 중요합니다.

컴포넌트 렌더링 최적화 기법

React는 렌더링을 스킵하는 세 가지 주요 기법을 제공합니다.

React.memo()

렌더링에서 중요한 methods React.memo()는 high order component(HOC) 타입으로 구성되어 있습니다. 컴포넌트 타입을 argument로써 받아드리고, 새로운 래퍼 컴포넌트를 리턴합니다. 래퍼 컴포넌트의 기본 동작은 props가 변경되었는지 확인하는 것입니다. 변경되지 않았으면 react 렌더링을 막습니다.

다른 옵션

• React.Component.shouldComponentUpdate

• optional class component lifecycle 입니다.

• false를 리턴하면 React는 렌더링을 스킵합니다.

• 가장 흔한 접근 방법은 컴포넌트 props, state가 마지막 시점으로 부터 변경되었는지 확인하는 것입니다. 변경되지 않으면 false를 리턴합니다.

이러한 비교 접근 방법을 shallow equality 라고 합니다. 이것은 두 개의 object 안에 있는 모든 개별 필드가 변경사항이 있는지 확인합니다.

이러한 접근 방식은 const shouldRender = !shallowEqual(newProps, prevProps)

React 컴포넌트가 렌더링 출력에서 이전과 정확히 동일한 참조요소를 반환하는 경우 React는 해당 자식을 다시 렌더링하지 않습니다. 관련 기술은 두 가지 정도 있습니다.

• props.children이 출력에 포함하는 경우 컴포넌트가 상태 업데이트를 수행하는 경우 해당 요소는 동일합니다.

• 일부 요소를 useMemo()로 래핑하면 종속성이 변경될 때까지 해당 요소는 동일하게 유지됩니다.

이 두 접근 방식의 차이점은 다음과 같습니다.

• React.memo(): 자식 구성 요소에 의해 제어됩니다.

• 동일 참조 요소: 부모 구성 요소에 의해 제어됩니다.

// The `props.children` content won't re-render if we update state
function SomeProvider({ children }) {
  const [counter, setCounter] = useState(0);

  return (
    <div>
      <button onClick={() => setCounter(counter + 1)}>Count: {counter}</button>
      <OtherChildComponent />
      {children}
    </div>
  );
}

function OptimizedParent() {
  const [counter1, setCounter1] = useState(0);
  const [counter2, setCounter2] = useState(0);

  const memoizedElement = useMemo(() => {
    // This element stays the same reference if counter 2 is updated,
    // so it won't re-render unless counter 1 changes
    return <ExpensiveChildComponent />;
  }, [counter1]);

  return (
    <div>
      <button onClick={() => setCounter1(counter1 + 1)}>
        Counter 1: {counter1}
      </button>
      <button onClick={() => setCounter1(counter2 + 1)}>
        Counter 2: {counter2}
      </button>
      {memoizedElement}
    </div>
  );
}

컴포넌트 렌더링을 건너뛰면 React가 해당 하위 트리 전체의 렌더링도 건너뜁니다. 기본적으로 자식 객체를 재귀적으로 렌더링 하는 동작을 중단하기 위한 정지 신호를 보내는 것과 마찬가지입니다.

새로운 Props 참조가 렌더링 최적화에 미치는 영향

이미 기본적으로 React가 props가 변경되지 않았더라도 모든 중첩된 구성 요소를 다시 렌더링한다는 것을 보았습니다. 자식 구성 요소에 props로 새 참조를 전달하는 것이 중요하지 않다는 것을 의미하는데, 동일한 props를 전달하든 전달하지 않든 렌더링되기 때문입니다.

매번 렌더링할 때마다 새로운 함수 참조와 새로운 객체 참조를 생성한 다음 props로 전달합니다.

하지만 자식 컴포넌트가 props가 변경되었는지 확인하여 렌더링을 최적화하려고 하는 경우, props로 새 참조를 전달하면 자식이 렌더링됩니다.

const MemoizedChildComponent = React.memo(ChildComponent);

function ParentComponent() {
  const onClick = () => {
    console.log('Button clicked');
  };

  const data = { a: 1, b: 2 };

  return <MemoizedChildComponent onClick={onClick} data={data} />;
}

렌더링 할 때마다 onClick과 data가 매번 동일한 값을 전달하는 데도 다시 렌더링될 것입니다.

• MemoizedChildComponent는 우리가 대부분의 시간 동안 렌더링을 건너뛰고 싶어도 다시 렌더링됩니다.

• 오래된 것과 새로운 것을 비교하는 낭비되는 작업이 발생합니다(비교되는 데이터가 같음).

Props 참조 최적화

클래스 구성 요소는 항상 동일한 참조인 인스턴스 메서드를 가질 수 있기 때문에 실수로 새 콜백 함수 참조를 만드는 것에 대해 크게 걱정할 필요가 없습니다. 그러나 별도의 자식 목록 항목에 대해 고유한 콜백을 생성하거나 익명 함수에서 값을 캡처해서 자식에 전달해야 할 수도 있습니다. 새 참조가 생성되고 렌더링하는 동안 자식 props로 새 객체가 생성됩니다.

React는 동일한 참조를 재사용하는 데 도움이 되는 hook을 제공합니다. useMemo는 객체를 생성하거나 복잡한 계산을 수행하고, useCallback은 특히 콜백 함수를 만드는 데 유용한 hook입니다.

모든 것을 메모하는가?

props로 전달하는 모든 함수나 객체에 대해 useMemo를 사용할 필요는 없습니다. 자식의 행동에 차이를 만들 경우에만 사용하면 됩니다.

• 종속성 배열 비교에 props를 참조에 넣는 경우가 있는데, 이는 상황을 더 복잡하게 만듭니다.

Dan Abramov는 메모이제이션은 여전히 props를 비교하는 비용을 초래하고, 메모이제이션 검사가 구성 요소가 항상 새로운 props를 수신하기 때문에 다시 렌더링을 하는 것을 결코 막을 수 없는 경우가 많다고 지적합니다.

불변성과 리렌더링

React의 상태 업데이트는 항상 불변적으로 이루어져야 합니다.

• 무엇을 어디에서 변형하느냐에 따라 컴포넌트가 렌더링되지 않을 수 있습니다.

• 데이터가 실제로 언제, 왜 업데이트 되었는지에 대한 혼란이 발생할 수 있습니다.

React.memo, PureComponent, shouldComponentUpdate 모두 현재 props와 이전 props의 얕은 비교 검사에 의존합니다.

props가 변경되지 않았다면 렌더링은 "불필요"하거나 "낭비"됩니다. 변형하면 구성 요소가 아무것도 변경되지 않았다고 잘못 생각할 수 있으며, 구성 요소가 왜 리렌더링 되지 않는지 의아해할 수 있습니다.

다음 문제는 hook입니다.

useState 또는 useReducer를 호출할 때마다 React는 다시 렌더링 대기열에 추가합니다. 그러나 React는 모든 hook 상태 업데이트가 새 객체, 배열 참조이든 새 기본(문자열, 숫자)이든 새 상태 값으로 새 참조를 전달, 반환해야 하는 것을 요구합니다.

React는 렌더링 단계에서 모든 상태 업데이트를 적용합니다. React는 항상 업데이트를 대기열에 넣은 컴포넌트의 렌더링을 완료합니다. 이전과 동일한 참조이고 렌더링을 계속할 다른 이유가 없는 경우 (예: 부모가 렌더링된 경우) React는 컴포넌트의 렌더링 결과를 버리고 렌더링 패스를 완전히 빠져나갑니다.

• React는 실제로 "빠른 경로" 메커니즘이 있어 어떤 경우에는 상태 업데이트를 큐에 넣기 전에 새 값을 확인하려고 시도합니다.

• setState는 불변성 데이터를 넣어야합니다. property에 접근하여 값을 변경하면 얕은 참조에 대한 변경이 이루어지므로 상태 업데이트가 적용되지 않습니다.

컨텍스트 및 렌더링 동작

React의 Context API

사용자가 제공한 단일 값을 컴포넌트의 하위 트리에서 사용할 수 있도록 하는 메커니즘.

컨텍스트는 "상태 관리" 도구가 아닙니다. 컨텍스트에 전달되는 값을 직접 관리해야합니다.

컨텍스트 기본 사항

Context.provider는 단일 props value를 수신합니다.

<MyContext.Provider value={42}>{...}</MyContext.Provider>

자식 구성 요소의 Consumer는 구성 요소를 렌더링하고 Provider에서 제공하는 데이터를 수신받고 소비할 수 있습니다.

ParentComponent를 렌더링할 때마다 React는 새 값이 주어졌다는 것을 알아차리고, 아래로 루핑하며 Provider를 소비하는 구성 요소를 찾습니다. Provider가 새 값을 가지면 해당 컨텍스트를 소비하는 모든 중첩된 구성 요소는 다시 렌더링하도록 강제됩니다.

React 관점에서 보면 context provider는 단일 값(value props)만 갖고 있습니다. 객체, 배열과 같은 참조형 데이터 또는 기본형 데이터인지는 중요하지 않습니다. 값은 하나뿐입니다. context를 사용하는 구성 요소가 새 value로 인해 발생하는 업데이트를 건너뛸 수 있는 방법은 없습니다.

function GrandChildComponent() {
  const value = useContext(MyContext);
  return <div>{value.a}</div>;
}

function ChildComponent() {
  return <GrandChildComponent />;
}

function ParentComponent() {
  const [a, setA] = useState(0);
  const [b, setB] = useState('text');
  const contextValue = { a, b };

  return (
    <MyContext.Provider value={contextValue}>
      <ChildComponent />
    </MyContext.Provider>
  );
}

상태 업데이트, 컨텍스트 및 리렌더링

우리는 다음과 같은 것을 알고 있습니다.

• setState()는 해당 컴포넌트의 렌더링을 대기열에 호출합니다.

• React는 기본적으로 중첩된 컴포넌트를 재귀적으로 렌더링합니다.

• Context Provider는 이를 렌더링하는 컴포넌트로부터 값을 받습니다.

• 해당 값은 일반적으로 부모 컴포넌트의 상태에서 나옵니다.

기본적으로 Provider를 갖는 하위 부모 컴포넌트에 대해 상태 업데이트가 이루어질 경우 context의 값을 읽었는지 여부에 관계없이 모든 하위 컴포넌트도 리렌더링됩니다.

Parent/Child/GrandChild 예시에서, 컨텍스트 업데이트 때문이 아니라, 렌더링 되기 때문에 리렌더링 한다는 것을 알 수 있습니다. ChildComponent는 단순 contextValue를 갖고 있는 GrandChildComponent를 렌더링합니다. context를 업데이트 하게 되면, GrandChildComponent의 context value를 업데이트가 반영되므로 value를 업데이트 하기 위해 관련된 컴포넌트를 모두 업데이트합니다. 그러므로 ChildComponent는 렌더링됩니다.

컨텍스트 업데이트 및 렌더링 최적화

예제를 수정하면 다음과 같습니다.

function GreactGrandChildComponent() {
  return <div>Hi</div>;
}

function GrandChildComponent() {
  const value = useContext(MyContext);

  return (
    <div>
      {value.a}
      <GreactGrandChildComponent />
    </div>
  );
}

function ChildComponent() {
  return <GrandChildComponent />;
}

const MemoizedChildComponent = React.memo(ChildComponent);

function ParentComponent() {
  const [a, setA] = useState(0);
  const [b, setB] = useState('text');
  const contextValue = { a, b };

  return (
    <MyContext.Provider value={contextValue}>
      <MemoizedChildComponent />
    </MyContext.Provider>
  );
}

예시 흐름

• ParentComponent 렌더링

• 새로운 contextValue 참조 생성

• React Provider에 새로운 값이 있음을 확인하고 이를 사용하는 모든 consumer는 context를 업데이트 해야함

• React는 렌더링 시, MemoizedChildCompoent에 래핑되어 있음을 확인. React.memo()의 props가 전달되지 않았으므로 변경되지 않았음. ChildComponent는 건너뜀

• React는 루핑하며 내려가다 GranchChildComponent에 도달하게 되고 컨텍스트에 값이 있기 때문에 리렌더링 해야함.

• GrandChildComponent를 렌더링 했기 때문에 React는 그 안(GrandChildComponent)에 있는 모든 것을 렌더링합니다.

부모 컴포넌트의 상태 업데이트에 대해 모든 하위 컴포넌트를 리렌더링하도록 강제하지 않고 컨텍스트를 읽는 섹션만 리렌더링하도록 구성할 수 있습니다. (자식 컴포넌트의 리렌더링 방지를 위해 "동일 요소 참조" 기술을 활용하여 기본적으로 동일한 결과를 얻을 수 있습니다.)