React 공식문서 - Keeping Components Pure(컴포넌트 순수성 유지)

컴포넌트를 엄격하게 순수 함수로만 작성하면 버그와 예측할 수 없는 동작을 피할 수 있고, 컴포넌트를 순수하게 작성하기 위해서는 몇 가지 규칙을 준수해야 한다.

---

Purity: Components as formulas(순수성: 수식으로서의 컴포넌트)

 

React 컴포넌트는 항상 동일한 입력이 주어졌을 때 항상 동일한 JSX를 반환해야 한다.

---

Side Effects: (un)intended consequences(사이드 이펙트: 의도하지 (않은) 결과)

 

컴포넌트는 오직 JSX만을 반환해야하며, 렌더링 전에 존재했던 객체나 변수를 변경해서는 안된다. 이는 컴포넌트를 순수하지 않게 만들 수 있다. 아래 예제에서 Cup 컴포넌트는 렌더링 시점에 따라 JSX도 다르게 생성된다.

let guest = 0;

function Cup() {
  // Bad: changing a preexisting variable!
  // 나쁨: 기존 변수를 변경합니다!
  guest = guest + 1;
  return <h2>Tea cup for guest #{guest}</h2>;
}

export default function TeaSet() {
  return (
    <>
      <Cup />
      <Cup />
      <Cup />
    </>
  );
}

위와 같은 문제를 해결하기 위해서는 guest를 prop으로 전달할 수 있다.(컴포넌트가 반환하는 JSX는 guest prop에만 의존하므로 순수하다.)

function Cup({ guest }) {
  return <h2>Tea cup for guest #{guest}</h2>;
}

export default function TeaSet() {
  return (
    <>
      <Cup guest={1} />
      <Cup guest={2} />
      <Cup guest={3} />
    </>
  );
}

* React에서는 렌더링하는 동안 읽을 수 있는 입력은 props, state, context로 세 가지이고 이러한 입력은 항상 읽기 전용으로 취급해야 한다.

 

* StrictMode로 순수하지 않은 계산 감지하기

Strict Mode는 컴포넌트 함수를 두 번 호출함으로써 규칙을 위반하는 컴포넌트를 찾아내는 데 도움이 된다. 만약 순수 함수의 경우에는 두번 호출해도 아무것도 바뀌지 않는다.

Stirct Mode는 상용 환경에서는 아무런 영향을 미치지 않으므로, 사용자의 앱 속도가 느려지지는 않는다.

---

Local mutation: Your component's littile secret(지역 변이: 컴포넌트의 작은 비밀)

 

컴포넌트가 렌더링하는 동안 기존 변수를 변경하는 것은 문제이지만, 렌더링하는 동안 방금 생성한 변수와 객체를 변경하는 것은 괜찮다.

function Cup({ guest }) {
  return <h2>Tea cup for guest #{guest}</h2>;
}

export default function TeaGathering() {
  let cups = [];
  for (let i = 1; i <= 12; i++) {
    cups.push(<Cup key={i} guest={i} />);
  }
  return cups;
}

위 예제와 같이 동일한 렌더링 중에 생성하는 것을 지역 변이라고 한다.

---

Where you can cause side effects(사이드 이펙트를 일으킬 수 있는 곳)

 

화면 업데이트, 애니메이션 시작, 데이터 변경과 같은 변경을 사이드 이펙트라고 하며, 이는 렌더링 중에 일어나는 것이 아닌 부수적으로 일어나는 일이다. React에서의 사이드 이펙트는 보통 이벤트 핸들러에 속하는데, 이는 컴포넌트 내부에 정의되어 있긴 하지만 렌더링 중에는 실행되지 않기 때문에 이벤트 핸들러는 순수할 필요가 없다.

 

만약 다른 모든 옵션을 사용해서 사이드 이펙트에 적합한 이벤트 핸들러를 찾을 수 없다면, 컴포넌트에서 useEffect 호출을 통해 반환된 JSX에 이벤트 핸들러를 첨부할 수 있지만, 이 방법은 최후의 수단으로 사용해야 한다.

 

위 예제에세 발생한 콘솔 오류을 해결하기 위해서는 해당 배열의 항목들 사이에서 고유하게 식별할 수 있는 문자열 또는 숫자인 key를 부여해야한다.

 

* 왜 React는 순수성을 중요시하는가?

- 순수한 컴포넌트는 동일 입력에 대해 동일 결과를 반환하기 때문에 다른 환경(예: 서버)에서 실행할 수 있다.

- 입력이 변경되지 않은 컴포넌트는 렌더링 건너뛰기(memo)를 사용해서 성능을 향상 시킬 수 있다.

- 순수성이 지켜지는 경우, 언제든지 계산을 중단하더라도 동일한 값을 출력할 수 있다.

---

* 참고 : React 공식문서(https://react-ko.dev/learn)