docs: update docs-keeping-components-pure.md according to feedback

Author: dhrgodms

src/content/learn/keeping-components-pure.md

@@ -16,7 +16,7 @@ title: 컴포넌트를 순수하게 유지하기
 
 </YouWillLearn>
 
-## 순수성: 수식 같은 컴포넌트 {/*purity-components-as-formulas*/}
+## 순수성: 수식으로서의 컴포넌트 {/*purity-components-as-formulas*/}
 
 컴퓨터 과학에서(특히 함수형 프로그래밍의 세계에서는) [순수 함수](https://wikipedia.org/wiki/Pure_function)는 다음과 같은 특징을 지니고 있습니다.
 
@@ -43,7 +43,7 @@ function double(number) {
 }
 ```
 
-위 예시에서, `double`은 **순수 함수**입니다. 매개변수로 `3`을 넘긴다면, 항상 `6`을 반환할 것입니다.
+위 예시에서, `double`은 **순수 함수**입니다. 인자로 `3`을 넘긴다면, 항상 `6`을 반환할 것입니다.
 
 React는 이러한 개념을 기반으로 설계되었습니다. **React는 여러분이 작성하는 모든 컴포넌트가 순수 함수라고 가정합니다.** 이러한 가정은 React 컴포넌트에 같은 입력이 주어진다면 늘 같은 JSX를 반환한다는 것을 의미합니다.
 
@@ -115,11 +115,11 @@ export default function TeaSet() {
 
 </Sandpack>
 
-이 컴포넌트는 바깥에 선언된 `guest`라는 변수를 읽고 수정하고 있습니다. 해당 컴포넌트를 **여러 번 호출할 때마다 각각 다른 JSX를 생성한다**는 것을 의미합니다! 게다가 _다른_ 컴포넌트들이 `guest`를 읽는다면, 각각 언제 렌더링 되었는지에 따라 다른 JSX를 생성할 것입니다! 이것은 예측 불가능한 동작입니다.
+이 컴포넌트는 컴포넌트 외부에 선언된 `guest`라는 변수를 읽고 수정하고 있습니다. 이는 **해당 컴포넌트를 여러 번 호출할 때마다 서로 다른 JSX를 생성한다**는 것을 의미합니다! 게다가 _다른_ 컴포넌트들이 `guest`를 읽는다면, 각각 언제 렌더링 되었는지에 따라 서로 다른 JSX를 생성할 것입니다! 이것은 예측 불가능한 동작입니다.
 
-<Math><MathI>y</MathI> = 2<MathI>x</MathI></Math>라는 공식으로 돌아가서, 이제 우리는 <Math><MathI>x</MathI> = 2</Math>라 하더라도 항상 <Math><MathI>y</MathI> = 4</Math>일 것이라고 확신할 수 없습니다. 우리의 테스트는 실패하고 사용자는 불편을 겪으며, 심지어 이것이 비행기까지 추락하게 만들 수도 있습니다. 순수하지 못한 코드가 얼마나 혼란스러운 버그로 이어질 수 있는지 아시겠죠?
+<Math><MathI>y</MathI> = 2<MathI>x</MathI></Math>라는 수식으로 돌아가서, 이제 우리는 <Math><MathI>x</MathI> = 2</Math>라 하더라도 항상 <Math><MathI>y</MathI> = 4</Math>일 것이라고 확신할 수 없습니다. 우리의 테스트가 실패하거나, 사용자는 불편을 겪으며, 심지어 비행기까지 추락하게 만들 수도 있습니다. 순수하지 못한 코드가 얼마나 혼란스러운 버그로 이어질 수 있는지 아시겠나요?
 
-여러분은 [`guest` 변수를 프로퍼티로](/learn/passing-props-to-a-component) 넘기는 방법으로 이 컴포넌트를 고칠 수 있습니다.
+대신, [`guest` 변수를 Prop으로 넘겨](/learn/passing-props-to-a-component)이 컴포넌트를 고칠 수 있습니다.
 
 <Sandpack>
 
@@ -141,23 +141,23 @@ export default function TeaSet() {
 
 </Sandpack>
 
-이제 컴포넌트가 `guest` 프로퍼티에만 의존해 JSX를 반환하므로 순수해졌습니다.
+이제 컴포넌트가 `guest` prop에만 의존해 JSX를 반환하므로 순수해졌습니다.
 
-일반적으로 컴포넌트가 특정 순서대로 렌더링될 것이라고 기대하면 안됩니다. <Math><MathI>y</MathI> = 2<MathI>x</MathI></Math>를 <Math><MathI>y</MathI> = 5<MathI>x</MathI></Math>보다 먼저 계산하든 나중에 계산하든 상관없습니다. 두 수식은 서로 독립적으로 결과를 도출하기 때문입니다. 마찬가지로 각 컴포넌트는 "자기 자신만 생각"해야 합니다. 렌더링 도중에 다른 컴포넌트와 영향을 주고받거나, 의존해서는 안됩니다. 마치 학교 시험과 같습니다. 각 컴포넌트는 자신의 JSX를 직접 계산해야 합니다!
+일반적으로 컴포넌트가 특정 순서대로 렌더링될 것이라고 기대하면 안됩니다. <Math><MathI>y</MathI> = 2<MathI>x</MathI></Math>를 <Math><MathI>y</MathI> = 5<MathI>x</MathI></Math>보다 먼저 계산하든 나중에 계산하든 상관없습니다. 두 수식은 서로 독립적으로 결과를 도출하기 때문입니다. 마찬가지로 각 컴포넌트는 "자기 자신만 생각"해야 합니다. 렌더링 도중에 다른 컴포넌트와 영향을 주고받거나, 의존해서는 안됩니다. 렌더링은 마치 학교 시험과 같습니다. 각 컴포넌트는 자신의 JSX를 직접 계산해야 합니다!
 
 <DeepDive>
 
 #### 엄격 모드(Strict Mode)로 순수하지 않은 연산을 찾아내기 {/*detecting-impure-calculations-with-strict-mode*/}
 
-아직 전부 사용해본 적은 없을 수 있겠지만, React에서 렌더링하는 동안 읽을 수 있는 세 가지 종류의 입력 요소가 있습니다. [Props](/learn/passing-props-to-a-component), [State](/learn/state-a-components-memory), 그리고 [Context](/learn/passing-data-deeply-with-context). 이러한 입력 요소는 항상 읽기전용으로 취급해야 합니다.
+아직 전부 사용해본 적은 없을 수 있지만, React에서는 렌더링하는 동안 읽을 수 있는 세 가지 종류의 입력 요소가 있습니다. [Props](/learn/passing-props-to-a-component), [State](/learn/state-a-components-memory), 그리고 [Context](/learn/passing-data-deeply-with-context). 이러한 입력 요소는 항상 읽기전용으로 취급해야 합니다.
 
 사용자의 입력에 따라 무언가를 _변경_ 하려는 경우, 변수 값을 직접 수정하는 대신 [State](/learn/state-a-components-memory)를 설정(set)해야 합니다. 컴포넌트가 렌더링되는 동안엔 기존 변수나 객체를 변경하면 안됩니다.
 
 React는 개발 중에 각 컴포넌트의 함수를 두 번 호출하는 "엄격 모드"를 제공합니다. **컴포넌트 함수를 두 번 호출함으로써, 엄격 모드는 이러한 규칙을 위반하는 컴포넌트를 찾는데 도움을 줍니다.**
 
 원래 예시에서 "Guest #1", "Guest #2", "Guest #3" 대신 "Guest #2", "Guest #4", "Guest #6"이 어떻게 표시되었는지 확인해보세요. 기존 함수가 순수하지 않았기에 엄격 모드로 인해 두 번 호출되는 과정에서 로직이 깨져버렸습니다. 그러나 수정된 순수 버전의 함수는 두 번씩 호출되더라도 동작합니다. **순수 함수는 오직 계산만 수행하므로 두 번 호출되더라도 아무것도 변하지 않습니다.** `double(2)`를 두 번 호출해도 반환값은 변하지 않는 것과 <Math><MathI>y</MathI> = 2<MathI>x</MathI></Math>을 두 번 푼다고 해도 <MathI>y</MathI>값이 바뀌지는 않는 것처럼, 항상 같은 입력이면 같은 출력을 내보냅니다.
 
-엄격 모드는 프로덕션에 영향을 주지 않기 때문에 사용자의 앱 속도가 느려지지 않습니다. 엄격 모드를 적용하려면 최상단 컴포넌트를 `<React.StrictMode>`로 감싸면 됩니다. 몇몇 프레임워크는 이것이 기본으로 설정되어 있습니다.
+엄격 모드는 프로덕션에 영향을 주지 않기 때문에 사용자의 앱 속도가 느려지지 않습니다. 엄격 모드를 적용하려면 최상단 컴포넌트를 `<React.StrictMode>`로 감싸면 됩니다. 몇몇 프레임워크에는 이것이 기본적으로 설정되어 있습니다.
 
 </DeepDive>
 
@@ -235,7 +235,7 @@ React에서, **사이드 이펙트는 보통 [이벤트 핸들러](/learn/respon
 
 <Hint>
 
-렌더링은 *연산*일 뿐입니다. 무언가를 직접 "수행"하려고 해서는 안 됩니다. 같은 생각을 다르게 표현할 수 있나요?
+렌더링은 *연산*일 뿐이며. 무언가를 직접 "수행"하려고 해서는 안 됩니다. 같은 생각을 다르게 표현할 수 있나요?
 
 </Hint>
 
@@ -366,7 +366,7 @@ body > * {
 
 #### 망가진 프로필 고치기 {/*fix-a-broken-profile*/}
 
-두 개의 `Profile` 컴포넌트는 각각 다른 데이터로 나란히 렌더링됩니다. 첫 번째 프로필에서 "Collapse"를 누른 다음 "Expand"를 누릅니다. 이제 두 프로필에 동일한 사람으로 표시될 것입니다. 이것은 버그입니다.
+두 개의 `Profile` 컴포넌트는 각각 다른 데이터로 나란히 렌더링됩니다. 첫 번째 프로필에서 "Collapse"를 누른 다음 "Expand"를 누릅니다. 이제 두 프로필에 동일한 사람이 표시될 것입니다. 이것은 버그입니다.
 
 버그의 원인을 찾아서 고쳐보세요.
 
@@ -475,7 +475,7 @@ h1 { margin: 5px; font-size: 18px; }
 
 문제는 `Profile` 컴포넌트가 기존 변수인 `currentPerson`를 수정하고 `Header` 및 `Avatar` 컴포넌트가 이 변수를 읽는다는 점입니다. 이것은 *세 가지 모두*를 순수하지 않게 만들고 예측하기 어렵게 만듭니다.
 
-버그를 수정하려면 `currentPerson` 변수를 제거하세요. 그리고 Props를 통해 `Profile`의 모든 정보를 `Header` 및 `Avatar`로 전달하세요. 두 컴포넌트에 `person` 프로퍼티를 추가하여 모든 하위 컴포넌트로 전달해야 합니다.
+버그를 수정하려면 `currentPerson` 변수를 제거하세요. 대신, Props를 통해 `Profile`의 모든 정보를 `Header` 및 `Avatar`로 전달하세요. 두 컴포넌트에 `person` 프로퍼티를 추가하여 모든 하위 컴포넌트로 전달해야 합니다.
 
 <Sandpack>
 
@@ -569,7 +569,7 @@ h1 { margin: 5px; font-size: 18px; }
 
 </Sandpack>
 
-React는 컴포넌트 함수가 특정 순서로 실행된다는 것을 보장하지 않기 때문에, 컴포넌트끼리 변수로 소통할 수 없습니다. 모든 소통은 프로퍼티를 통해 이루어져야 합니다.
+React는 컴포넌트 함수가 특정 순서로 실행된다는 것을 보장하지 않기 때문에, 컴포넌트 함수 간에 변수로 소통할 수 없습니다. 모든 소통은 프로퍼티를 통해 이루어져야 합니다.
 
 </Solution>
 
@@ -673,9 +673,9 @@ li {
 
 <Solution>
 
-시계가 업데이트될 때마다 "Create story"가 _두 번_ 추가됩니다. 이는 렌더링 중에 변경이 있음을 알려줍니다. 엄격 모드는 컴포넌트를 두 번 호출하여 이러한 문제를 더 눈에 띄게 만들도록 해줍니다.
+시계가 업데이트될 때마다 "Create story"가 _두 번_ 추가됩니다. 이는 렌더링 중에 변경이 있음을 암시합니다. 엄격 모드는 컴포넌트를 두 번 호출하여 이러한 문제를 더 눈에 띄게 만들도록 해줍니다.
 
-`StoryTray` 함수는 순수하지 않습니다. 전달된 `stories` 배열(Prop)에 `push`를 호출하면 `StroyTray`가 렌더링을 시작하기 _전에_ 생성되었던 객체를 직접 변경합니다. 이로 인해 버그가 발생하고 결과를 예측하기가 매우 어렵게 된 것입니다.
+`StoryTray` 함수는 순수하지 않습니다. 전달된 `stories` 배열(Prop)에서 `push`를 호출하면 `StroyTray`가 렌더링을 시작하기 _전에_ 생성되었던 객체를 직접 변경합니다. 이로 인해 버그가 발생하고 결과를 예측하기가 매우 어렵게 되었습니다.
 
 가장 간단한 해결 방법은 배열을 전혀 건드리지 않고 "Create Story"를 별도로 렌더링하는 것입니다.