diff --git a/src/content/learn/keeping-components-pure.md b/src/content/learn/keeping-components-pure.md index 216ed577f..58e64950f 100644 --- a/src/content/learn/keeping-components-pure.md +++ b/src/content/learn/keeping-components-pure.md @@ -219,14 +219,12 @@ React에선, **사이드 이펙트는 보통 [이벤트 핸들러](/learn/respon * **자신의 일에 집중합니다.** 렌더링전에 존재했던 객체나 변수를 변경하지 않아야 합니다. * **같은 입력, 같은 결과물.** 입력이 같을 경우, 컴포넌트는 항상 같은 JSX를 반환해야 합니다. * 렌더링은 언제든지 발생할 수 있으므로 컴포넌트는 서로의 렌더링 순서에 의존하지 않아야 합니다. -* 컴포넌트가 렌더링을 위해 사용되는 입력을 변형해서는 안 됩니다. 여기에는 프로퍼티즈, 상태, 그리고 컨텍스트가 포함됩니다. 화면을 업데이트하려면 기존 객체를 변환하는 대신 [상태를 "설정"](/learn/state-a-components-memory)하십시오. +* 컴포넌트가 렌더링을 위해 사용되는 입력을 변형해서는 안 됩니다. 여기에는 Props, 상태, 그리고 컨텍스트가 포함됩니다. 화면을 업데이트하려면 기존 객체를 변환하는 대신 [상태를 "설정"](/learn/state-a-components-memory)하십시오. * 반환하는 JSX에서 컴포넌트의 로직을 표현하기 위해 노력하십시오. "무언가를 변경"해야 할 경우 일반적으로 이벤트 핸들러에서 변경하고 싶을 것입니다. 마지막 수단으로 `useEffect`를 사용할 수 있습니다. * 순수 함수를 작성하는 것은 약간의 연습이 필요하지만, React 패러다임의 힘을 풀어줍니다. - - #### 고장난 시계를 고쳐보세요 {/*fix-a-broken-clock*/} @@ -477,7 +475,7 @@ h1 { margin: 5px; font-size: 18px; } 문제는 `Profile` 컴포넌트가 기존 변수인 `currentPerson`를 수정하고 `Header` 및 `Avatar` 컴포넌트가 이 변수를 읽는다는 점이다. 이것은 *세 가지 모두*를 순수하지 않게 만들고 예측하기 어렵게 만듭니다. -버그를 수정하려면 `currentPerson` 변수를 제거하세요. 대신 프로퍼티즈를 통해 `Profile`의 모든 정보를 `Header` 및 `Avatar`로 전달하세요. 두 컴포넌트에 `person` 프로퍼티를 추가해서 끝까지 전달해야 합니다. +버그를 수정하려면 `currentPerson` 변수를 제거하세요. 대신 Props를 통해 `Profile`의 모든 정보를 `Header` 및 `Avatar`로 전달하세요. 두 컴포넌트에 `person` 프로퍼티를 추가해서 끝까지 전달해야 합니다.