Keeping Components Pure 컴포넌트의 순수성 유지

일부 JavaScript 함수는 순수 합니다. 순수 함수는 계산만 수행할 뿐 그 이상은 수행하지 않습니다. 컴포넌트를 순수 함수로만 엄격하게 작성함으로써 코드베이스가 커짐에 따라 발생하는 모든 종류의 당황스러운 버그와 예측할 수 없는 동작을 방지할 수 있습니다. 그러나 이러한 혜택을 얻기 위해서는 몇 가지 규칙을 따라야 합니다.

You will learn

• 순수성이란 무엇이며 어떻게 버그를 피하는 데 어떻게 도움이 되는지
• 렌더 단계에서 변경 사항을 제거하여 컴포넌트를 순수하게 유지하는 방법
• Strict Mode를 사용하여 컴포넌트의 오류를 찾는 방법

Purity: Components as formulas

컴퓨터 과학(특히 함수형 프로그래밍 세계)에서 순수 함수는 다음과 같은 특성을 가진 함수입니다.

• 그것은 자기 일에 신경씁니다. 호출되기 전에 존재했던 객체나 변수는 변경되지 않습니다.
• 동일한 입력, 동일한 출력. 동일한 입력이 주어지면 순수 함수는 항상 동일한 결과를 반환해야 합니다.

순수 함수의 한 가지 예제인 수학 공식에 이미 익숙할 수 있습니다.

y = 2x라는 수학 공식을 생각해 보십시오.

x = 2이면 y = 4입니다. 항상.

x = 3이면 y = 6입니다. 항상.

x = 3이면 시간이나 주식 시장 상태에 따라 y가 9가 아니거나 -1 또는 2.5가 되지 않을 수 있습니다.

y = 2x 및 x = 3이면 y는 항상 6입니다.

이를 JavaScript 함수로 만들면 다음과 같이 됩니다.

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

위의 예제에서 double은 순수한 함수입니다. 항상 3을 전달하면 6을 반환합니다.

React는 이 개념을 중심으로 설계됐습니다. React에서는 사용자가 작성하는 모든 컴포넌트가 순수한 함수라고 가정합니다. 즉, 작성한 React 컴포넌트는 동일한 입력에 대해(입력이 주어지면) 항상 동일한 JSX를 반환해야 합니다.

App.js

function Recipe({ drinkers }) {
  return (
    <ol>    
      <li>Boil {drinkers} cups of water.</li>
      <li>Add {drinkers} spoons of tea and {0.5 * drinkers} spoons of spice.</li>
      <li>Add {0.5 * drinkers} cups of milk to boil and sugar to taste.</li>
    </ol>
  );
}

export default function App() {
  return (
    <section>
      <h1>Spiced Chai Recipe</h1>
      <h2>For two</h2>
      <Recipe drinkers={2} />
      <h2>For a gathering</h2>
      <Recipe drinkers={4} />
    </section>
  );
}

drinkers={2}를 Recipe에 전달하면 물 2컵이 포함된 JSX가 반환됩니다. 언제나.

drinkers={4}를 전달하면 물 4컵이 포함된 JSX가 반환됩니다. 언제나.

Just like a math formula.
수학 공식처럼요.

컴포넌트를 레시피로 생각할 수 있습니다. 만약 여러분이 그것을 따르고 요리 과정에서 새로운 재료를 소개하지 않는다면 매번 같은 요리를 얻을 수 있습니다. 그 "접시"는 컴포넌트가 렌더링을 위해 React에 제공하는 JSX입니다.

Side Effects: (un)intended consequences

React의 렌더링 프로세스는 항상 순수해야 합니다. 컴포넌트는 JSX만 반환 해야 하며 렌더링 전에 존재했던 객체나 변수를 변경 하면 안 됩니다.-그것은 불순하게 만들 것입니다!

이 규칙을 위반하는 컴포넌트는 다음과 같습니다.

App.js

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