React 공식문서 정리 4 - 컴포넌트 순수하게 유지하기

컴포넌트 순수하게 유지하기

순수성

순수 함수:
함수가 호출되기 전에 존재했던 어떤 객체나 변수를 변경하지 않는다.
같은 입력이 주어진다면 같은 출력을 반환해야한다.

리액트는 모든 컴포넌트가 순수 함수일거라 가정함

사이드 이펙트

사이드 이펙트:
순수성과 반대되는 컴포넌트
의도하지 않은 결과를 반환함

let guest = 0;

function Cup() {
  // 나쁜 지점: 이미 존재했던 변수를 변경하고 있다!
  guest = guest + 1;
  return <h2>Tea cup for guest #{guest}</h2>;
}

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

컴포넌트 외부의 guest라는 변수를 읽고, 값을 수정하고 있음 -> 사이드 이펙트 발생!!

순수함을 유지하는 방법

렌더링은 언제든지 발생할 수 있기 때문에 컴포넌트는 렌더링 순서와 무관하게 동일한 출력을 가져야한다.
props, 상태, 컨택스트 등 컴포넌트가 입력을 변형해서는 안된다.

함수형 프로그래밍에서의 순수함수 의미?