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

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

In computer science (and especially the world of functional programming), a pure function is a function with the following characteristics: 컴퓨터 과학(특히 함수형 프로그래밍의 세계)에서 순수 함수는 다음과 같은 특징을 가진 함수입니다:

• It minds its own business. It does not change any objects or variables that existed before it was called.
• Same inputs, same output. Given the same inputs, a pure function should always return the same result.

You might already be familiar with one example of pure functions: formulas in math. 순수 함수의 한 가지 예로 수학의 공식을 이미 잘 알고 계실 것입니다.

Consider this math formula: y = 2x. 다음 수학 공식을 생각해 보세요: y = 2x.

If x = 2 then y = 4. Always. x = 2이면 y = 4입니다. 항상 그렇습니다.

If x = 3 then y = 6. Always. x = 3이면 y = 6입니다. 항상 그렇습니다.

If x = 3, y won’t sometimes be 9 or –1 or 2.5 depending on the time of day or the state of the stock market. x = 3이면, y 는 결코 시간이나 주식 시장 상태에 따라 9, –1, 2.5가 되지 않습니다.

If y = 2x and x = 3, y will always be 6. y = 2x이고 x = 3이면 y는 항상 6이 됩니다.

If we made this into a JavaScript function, it would look like this: 이를 JavaScript 함수로 만들면 다음과 같이 보일 것입니다:

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

In the above example, double is a pure function. If you pass it 3, it will return 6. Always. 위의 예에서 double은 순수 함수입니다. 3을 전달하면 6을 반환합니다. 언제나요.

React is designed around this concept. React assumes that every component you write is a pure function. This means that React components you write must always return the same JSX given the same inputs: React는 이 개념을 중심으로 설계되었습니다. React는 여러분이 작성하는 모든 컴포넌트가 순수 함수라고 가정합니다. 즉, 여러분이 작성하는 React 컴포넌트는 동일한 입력이 주어졌을 때 항상 동일한 JSX를 반환해야 합니다:

When you pass drinkers={2} to Recipe, it will return JSX containing 2 cups of water. Always. drinkers={2}를 Recipe에 전달하면 언제나 2 cups of water이 포함된 JSX를 반환합니다.

If you pass drinkers={4}, it will return JSX containing 4 cups of water. Always. 만약 drinkers={4}를 전달하면 항상 4 cups of water이 포함된 JSX를 반환합니다.

Just like a math formula. 수학 공식과 같습니다.

You could think of your components as recipes: if you follow them and don’t introduce new ingredients during the cooking process, you will get the same dish every time. That “dish” is the JSX that the component serves to React to render. 컴포넌트를 레시피라고 생각할 수 있습니다. 레시피를 따르고 요리 과정에서 새로운 재료를 넣지 않으면 매번 같은 요리를 얻을 수 있습니다. 그 “요리”는 컴포넌트가 렌더링에 반응하기 위해 제공하는 JSX입니다.

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

React’s rendering process must always be pure. Components should only return their JSX, and not change any objects or variables that existed before rendering—that would make them impure! React의 렌더링 프로세스는 항상 순수해야 합니다. 컴포넌트는 오직 JSX만을 반환해야 하며, 렌더링 전에 존재했던 객체나 변수를 변경해서는 안 됩니다. 이는 컴포넌트를 불순하게 만들 수 있습니다!

Here is a component that breaks this rule: 다음은 이 규칙을 어기는 컴포넌트입니다:

This component is reading and writing a guest variable declared outside of it. This means that calling this component multiple times will produce different JSX! And what’s more, if other components read guest, they will produce different JSX, too, depending on when they were rendered! That’s not predictable. 이 컴포넌트는 외부에서 선언된 guest 변수를 읽고 쓰고 있습니다. 즉,이 컴포넌트는 호출할 때마다 다른 JSX가 생성된다는 뜻입니다! 게다가 다른 컴포넌트가 guest를 읽으면 렌더링된 시점에 따라 JSX도 다르게 생성됩니다! 예측할 수 없는 일입니다.

Going back to our formula y = 2x, now even if x = 2, we cannot trust that y = 4. Our tests could fail, our users would be baffled, planes would fall out of the sky—you can see how this would lead to confusing bugs! 다시 y = 2x 공식으로 돌아가보면, 이제 x = 2라고 해도 y = 4라고 믿을 수 없습니다. 테스트는 실패할 것이고, 사용자는 당황할 것이며, 비행기는 하늘에서 떨어질 수 있습니다. 이것이 어떻게 혼란스러운 버그로 이어지는지 알 수 있을 것입니다!

You can fix this component by passing guest as a prop instead: guest를 prop으로 전달함으로써 이 컴포넌트를 고칠 수 있습니다:

Now your component is pure, as the JSX it returns only depends on the guest prop. 이제 컴포넌트가 반환하는 JSX는 guest prop에만 의존하므로 순수합니다.

In general, you should not expect your components to be rendered in any particular order. It doesn’t matter if you call y = 2x before or after y = 5x: both formulas will resolve independently of each other. In the same way, each component should only “think for itself”, and not attempt to coordinate with or depend upon others during rendering. Rendering is like a school exam: each component should calculate JSX on their own! 일반적으로 컴포넌트가 특정 순서로 렌더링될 것이라고 기대해서는 안 됩니다. y = 2x를 y = 5x 앞에 호출하든 뒤에 호출하든 상관없습니다. 두 수식은 서로 독립적으로 해결됩니다. 마찬가지로 각 컴포넌트는 렌더링 중에 다른 컴포넌트와 조율하거나 의존하지 말고 “스스로 생각”하게 해야 합니다. 렌더링은 학교 시험처럼 각 컴포넌트가 스스로 JSX를 계산해야 합니다!

Local mutation: Your component’s little secret 지역 변이: 컴포넌트의 작은 비밀

In the above example, the problem was that the component changed a preexisting variable while rendering. This is often called a “mutation” to make it sound a bit scarier. Pure functions don’t mutate variables outside of the function’s scope or objects that were created before the call—that makes them impure! 위의 예시에서는 컴포넌트가 렌더링하는 동안 기존 변수를 변경하는 것이 문제였습니다. 이를 좀 더 무섭게 들리게 하기 위해 “변이”라고 부르기도 합니다. 순수 함수는 함수의 범위를 벗어난 변수나 호출 전에 생성된 객체를 변이하지 않습니다. 그러면 순수하지 않으니까요!

However, it’s completely fine to change variables and objects that you’ve just created while rendering. In this example, you create an [] array, assign it to a cups variable, and then push a dozen cups into it: 하지만 렌더링하는 동안 ‘방금’ 생성한 변수와 객체를 변경하는 것은 완전히 괜찮습니다. 이 예제에서는 [] 배열을 생성하고 이를 cups 변수에 할당한 다음 컵 12개를 그 안에 push합니다:

If the cups variable or the [] array were created outside the TeaGathering function, this would be a huge problem! You would be changing a preexisting object by pushing items into that array. cups 변수나 [] 배열이 TeaGathering 함수 외부에서 생성되었다면 이는 큰 문제가 될 것입니다! 해당 배열에 항목을 밀어 넣음으로써 기존 객체를 변경하게 될 것이기 때문입니다.

However, it’s fine because you’ve created them during the same render, inside TeaGathering. No code outside of TeaGathering will ever know that this happened. This is called “local mutation”—it’s like your component’s little secret. 하지만 TeaGathering 내부에서 동일한 렌더링 중에 생성했기 때문에 괜찮습니다. TeaGathering 외부의 어떤 코드도 이런 일이 일어났다는 것을 알 수 없습니다. 이를 “지역 변이”라고 하며, 컴포넌트의 작은 비밀과 같습니다.

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

While functional programming relies heavily on purity, at some point, somewhere, something has to change. That’s kind of the point of programming! These changes—updating the screen, starting an animation, changing the data—are called side effects. They’re things that happen “on the side”, not during rendering. 함수형 프로그래밍은 순수성에 크게 의존하지만, 언젠가는 어딘가에서 무언가는 바뀌어야 합니다. 이것이 바로 프로그래밍의 핵심입니다! 화면 업데이트, 애니메이션 시작, 데이터 변경과 같은 이러한 변경을 사이드 이펙트라고 하며, 렌더링 중에 일어나는 것이 아니라 “부수적으로” 일어나는 일입니다.

In React, side effects usually belong inside event handlers. Event handlers are functions that React runs when you perform some action—for example, when you click a button. Even though event handlers are defined inside your component, they don’t run during rendering! So event handlers don’t need to be pure. React에서 사이드 이펙트는 보통 이벤트 핸들러에 속합니다. 이벤트 핸들러는 사용자가 어떤 동작을 수행할 때(예를 들어, 버튼을 클릭할 때) React가 실행하는 함수입니다. 이벤트 핸들러가 컴포넌트 내부에 정의되어 있긴 하지만 렌더링 중에는 실행되지 않습니다! 따라서 이벤트 핸들러는 순수할 필요가 없습니다.

If you’ve exhausted all other options and can’t find the right event handler for your side effect, you can still attach it to your returned JSX with a useEffect call in your component. This tells React to execute it later, after rendering, when side effects are allowed. However, this approach should be your last resort. 다른 모든 옵션을 다 사용했는데도 사이드 이펙트에 적합한 이벤트 핸들러를 찾을 수 없다면, 컴포넌트에서 useEffect 호출을 통해 반환된 JSX에 이벤트 핸들러를 첨부할 수 있습니다. 이렇게 하면 나중에 렌더링 후 사이드 이펙트가 허용될 때 React가 이를 실행하도록 지시합니다. 하지만 이 방법은 최후의 수단으로 사용해야 합니다.

When possible, try to express your logic with rendering alone. You’ll be surprised how far this can take you! 가능하면 렌더링만으로 로직을 표현하고자 노력해 보세요. 이렇게 하면 얼마나 많은 것을 얻을 수 있는지 놀라실 겁니다!