React 컴포넌트가 순수해야 하는 이유

무한 렌더 루프부터 성능 저하, 컨커런트 기능 마비까지 연쇄 문제가 터진다면 React 컴포넌트가 순수하지 않게 작성되었을 가능성이 있습니다. 

React 컴포넌트의 순수성은 “렌더 안에서는 출력(JSX)만, 렌더 밖에서는 사이드이펙트만”이라는 단순한 원칙을 지키기만 하면 됩니다.

아래 내용에서 그 예시와 문제점들을 다루어보겠습니다.

순수성이란?

1. 순수함수
   • 외부 상태를 변경하지 않습니다.(no side effect)
   • 동일한 입력에 항상 동일한 출력을 반환합니다.
2. 컴포넌트의 순수성
   • React 컴포넌트 함수는 순수함수의 특징을 그대로 가져야 합니다.
   • 컴포넌트 함수는 사이드 이펙트에 관여하지 않습니다.

그렇다면 사이드이펙트는 누가 담당할까요?

• DOM 반영(Commit Phase)에서
  • Paint 이전 → useLayoutEffect
  • Paint 이후 → useEffect
• 사용자 입력 시점에 실행된 이벤트 핸들러

React 컴포넌트가 순수하지 않을 때 발생하는 문제

무한(또는 과도한) 리렌더가 발생합니다.

function BadCounter() {
  const [n, setN] = React.useState(0);
  setN(1);
  return <p>{n}</p>;
}

• 컴포넌트 함수가 실행되면서 Render Phase에서 상태 변경으로 인한 리렌더를 트리거합니다.
• 새로 트리거된 리렌더는 또 다른 리렌더를 트리거하면서 무한루프를 발생시킵니다.
• 순수함수가 사이드이펙트(setN(1))를 발생시켰다는 점에서 순수성이 깨졌습니다.

React Concurrent가 안전하게 동작할 수 없습니다.

*Concurrent(fiber 기반): React 18 ~ 기본탑재 - UI 업데이트를 순차적으로 한번에 처리하지 않고 중단·재개 할 수 있는 렌더링 모드

• React Concurrent는 Render Phase에 side effect(state변경, DOM 조작, 네트워크 호출 등)가 없다고 가정합니다.
• side effect가 렌더 과정 중 난입되면 인풋에 대한 아웃풋이 일정하게 보장될 수 없어지므로
  • 필요에 따른 렌더링을 중단·재개를 할 수 없게 됩니다.
  • 사이드이펙트로 인해 memo된 결과가 보장되지 못하므로 재사용을 시도하지 않습니다.