🐳 React에서의 순수 컴포넌트

순수 함수란 무엇인가?

순수 함수란 사이드 이펙트가 없는 함수, 즉 함수의 실행이 외부에 영향을 끼치지 않는 함수를 뜻하고 입력으로 전달된 값을 수정하지 않는 불변성을 가지고 있다. 따라서 순수함수는 어떠한 전달인자가 주어지더라도 항상 똑같은 값이 리턴됨을 보장한다.

• 사이드 이펙트를 만들지 않는다. 함수는 입력받은 값만을 가지고 결과를 반환하며, 그 외 어떤 외부 상태도 변경하지 않는다.
• 동일 입력, 동일 출력. 동일한 입력에 대해 순수 함수는 언제나 동일한 결과를 출력한다.

사이드 이펙트란?

함수의 입력 외에도 함수의 결과에 영향을 미치는 요인이다. 대표적으로 네트워크 요청,
API 호출이 side effect이다.

순수 함수 개념이 중요한 이유는?

사이드 이펙트를 줄이고, 모듈화 수준을 높이는 함수형 프로그래밍의 특징, 즉 순수 함수는 평가 시점이 무관하다는 특징으로 인해 효율적인 로직을 구성할 수 있다.

React에서의 순수 컴포넌트란?

React는 순수 함수를 중심으로 설계되었다. 모든 컴포넌트가 순수 함수라고 가정한다.
즉, 우리가 작성하는 React 컴포넌트는 동일한 입력이 주어졌을 때 항상 동일한 JSX를 반환해야 한다.

다음 코드는 불순한 컴포넌트의 예시이다. 😒

let guest = 0

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

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

이 컴포넌트는 외부에서 선언된 guest 변수를 읽고 쓰고 있다. 즉, 이 컴포넌트는 호출할 때마다 다른 JSX가 생성된다는 뜻이다! 게다가 다른 컴포넌트가 guest를 읽으면 렌더링된 시점에 따라 JSX도 다르게 생성된다.

guest를 props로 전달함으로써 이 컴포넌트를 고칠 수 있다. 😊

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} />
    </>
  )
}

이제 컴포넌트가 반환하는 JSX는 guest props에만 의존하므로 순수하다. 각 컴포넌트는 렌더링 중에 다른 컴포넌트와 조율하거나 의존하지 말고 "스스로 생각"하게 해야한다.

local mutation (지역 변이) : 컴포넌트의 작은 비밀

위의 예시에서는 컴포넌트가 렌더링하는 동안 기존 변수를 변경하는 것이 문제였다. 이를 "변이(mutation)" 이라고 부른다. 순수 함수는 함수의 범위를 벗어난 변수나 호출 전에 생성된 객체를 변이하지 않는다. 그러면 순수하지 않기 때문이다.

하지만 렌더링하는 동안 '방금' 생성한 변수와 객체를 변경하는 것은 괜찮다. 이 예제에서는 배열을 생성하고 이를 cups 변수에 할당한 다음 컵 12개를 그 안에 push 한다.

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
}

cups 변수나 배열이 TeaGathering 함수 외부에서 생성되었다면 이는 큰 문제가 될 것이다! 해당 배열에 항목을 밀어 넣음으로써 기존 객체를 변경하게 될 것이기 때문이다.

하지만 TeaGathering 내부에서 동일한 렌더링 중에 생성했기 때문에 괜찮다. TeaGathering 외부의 어떤 코드도 이런 일이 일어났다는 것을 알 수 없다. 이를 "지역 변이(Local Mutation)"이라고 하며, 컴포넌트의 작은 비밀과 같다.

사이드 이펙트를 일으킬 수 있는 곳

함수형 프로그래밍은 순수성에 크게 의존하지만, 언젠가는 어딘가에서 무언가는 바뀌어야 한다. 이것이 바로 프로그래밍의 핵심이다! 화면 업데이트, 애니메이션 시작, 데이터 변경과 같은 이러한 변경을 사이드 이펙트라고 하며, 렌더링 중에 일어나는 것이 아니라 "부수적으로" 일어나는 일이다.

React에서 사이드 이펙트는 보통 이벤트 핸들러에 속한다. 이벤트 핸들러가 컴포넌트 내부에 정의되어 있긴 하지만 렌더링 중에는 실행되지 않는다! 따라서 이벤트 핸들러는 순수할 필요가 없다.

다른 모든 옵션을 다 사용했는데도 사이드 이펙터에 적합한 이벤트 핸들러를 찾을 수 없다면, 컴포넌트에서 useEffect 호출을 통해 반환된 JSX에 이벤트 핸들러를 첨부할 수 있다. 이렇게 하면 나중에 렌더링 후 사이드 이펙트가 허용될 때 React가 이를 실행하도록 지시한다. 하지만 이 방법은 최후의 수단으로 사용해야한다.

요약

• 컴포넌트는 순수해야 한다.

  • 사이드 이펙트를 만들지 않는다. 함수는 입력받은 값만을 가지고 결과를 반환하며, 그 외 어떤 외부 상태도 변경하지 않는다.
  • 동일 입력, 동일 출력. 동일한 입력에 대해 순수 함수는 언제나 동일한 결과를 출력한다.
• 컴포넌트가 렌더링에 사용하는 어떠한 입력값도 변이해서는 안된다. 여기에는 props, state 및 context가 포함된다. 화면을 업데이트하려면 기존 객체를 변이하는 대신 setState를 사용하자.
• 컴포넌트의 로직을 반환하는 JSX 안에 표현하기 위해 노력하자. "무언가를 변경"해야 할 때는 보통 이벤트 핸들러에서 이 작업을 수행하고자 할 것이다. 최후의 수단으로 useEffect를 사용할 수 있다.