[React] 공식문서 공부 - 순수함수로 컴포넌트 작성

자바스크립트에서 순수함수는 오직 단순한 계산과 같은 동작만 하도록 만들어지는 함수입니다.

리액트에서 컴포넌트를 순수함수로 만들면 버그와 예측할 수 없는 동작을 방지할 수 있다고 합니다.

| 순수함수

순수함수는 y=2x와 같은 하나의 값을 넘기면 항상 같은 값을 반환하는 함수들을 말합니다.

function double(num) {
  return 2 * num;
}

위와 같은 double 함수가 순수 함수에 속합니다.

 

리액트 이러한 개념들로 디자인되었고

내가 작성한 모든 함수들을 순수함수라고 가정한다고 합니다.

| 컴포넌트의 순수성

function Sum({ num }) {
  return (
    <div>    
      2 + {num} = {2 + num}
    </div>
  );
}

export default function App() {
  return (
    <div>
      <h2>2 더하기 2</h2>
      <Sum num={2} />
      <h2>2 더하기 4</h2>
      <Sum drinkers={4} />
    </div>
  );
}

위 예제를 보면 num={2}를 넣으면 항상 숫자 2를 포함한 JSX를 반환하고,

num={4}를 넣으면 항상 숫자 4를 포함한 JSX를 반환합니다.

| 컴포넌트의 비 순수성

리액트의 렌더링은 항상 순수해하고

렌더링 전에 존재했던 객체나 변수를 변경해서는 안됩니다.

let num = 0;

function Sum() {
  num = num + 1;
  return <h2>{num}</h2>;
}

export default function App() {
  return (
    <>
      <Sum />
      <Sum />
      <Sum />
    </>
  );
}

 

위 예제에서 Sum컴포넌트는 이전에 존재했던 변수 num을 변경하고 있습니다.

따라서 위 컴포넌트가 여러 번 쓰이면 각각 다른 JSX가 생성되며

예측할 수 없기 때문에 비 순수하고 안 좋은 방법입니다.

 

따라서 위 코드를 순수 함수로 작성하려면 이런 식으로 해야 합니다.

function Sum({ num }) {
  return <h2>{num}</h2>;
}

export default function App() {
  return (
    <>
      <Sum num={1} />
      <Sum num={2} />
      <Sum num={3} />
    </>
  );
}

이런 식으로 하면 반환되는 JSX는 props에만 의존하기 때문에 순수해질 수 있습니다.

 

또한 위의 비 순수한 컴포넌트의 예제에는 컴포넌트가 렌더링 되는 동안

기존에 존재했던 변수를 변경하였는데 

컴포넌트가 렌더링 되는 도중에 방금 생성된 변수나 객체는 변경되어도 됩니다.

function Sum({ num }) {
  return <h2>{num}</h2>;
}

export default function App() {
  let nums = [];
  for (let i = 1; i <= 12; i++) {
    nums.push(<Sum key={i} num={i} />);
  }
  return nums;
}

위 예제에서 nums배열이 App함수 외부에서 생성되었으면 문제가 되었을 겁니다.

하지만 내부에서 생성되었기에 문제가 없습니다.

App내부에서는 외부에서 어떠한 일이 발생했는지 알지 못하며,

이를 "local mutation"이라고 부릅니다.