docs(typo): fix typo 'react' linted by textlint

src/content/blog/2022/03/29/react-v18.md

@@ -195,7 +195,7 @@ React 18의 Suspense는 transition API와 함께 사용할 때 가장 잘 작동
 
 ### 새로운 Strict 모드 동작들 {/*new-strict-mode-behaviors*/}
 
-앞으로는 리액트가 state를 유지하면서 UI의 섹션을 추가하고 제거할 수 있는 기능을 추가하고 싶습니다. 예를 들어 사용자가 화면에서 벗어나 뒤로 탭 할 때 React는 이전 화면을 즉시 표시할 수 있어야 합니다. 이를 위해 리액트는 이전과 동일한 컴포넌트 state를 사용하여 트리를 마운트 해제하고 다시 마운트합니다.
+앞으로는 React가 state를 유지하면서 UI의 섹션을 추가하고 제거할 수 있는 기능을 추가하고 싶습니다. 예를 들어 사용자가 화면에서 벗어나 뒤로 탭 할 때 React는 이전 화면을 즉시 표시할 수 있어야 합니다. 이를 위해 React는 이전과 동일한 컴포넌트 state를 사용하여 트리를 마운트 해제하고 다시 마운트합니다.
 
 이 기능을 사용하면 React 앱의 성능이 즉시 향상되지만, 컴포넌트가 effect가 여러 번 마운트 및 소멸하는 것에 대해 탄력적이어야 합니다. 대부분의 effect는 변경 없이 작동하지만 일부 effect는 한 번만 마운트되거나 소멸한다고 가정합니다.
 

src/content/community/acknowledgements.md

@@ -59,7 +59,7 @@ React는 원래 [Jordan Walke](https://github.com/jordwalke)에 의해 만들어
 
 이 목록이 전체 목록은 아닙니다.
 
-수년간 지도와 지원을 주신 [Tom Occhino](https://github.com/tomocchino)와 [Adam Wolff](https://github.com/wolffiex)에게 특별한 감사를 드립니다. [리액트를 다른 언어로 번역한](https://translations.reactjs.org/) 모든 자원봉사자에게도 감사합니다.
+수년간 지도와 지원을 주신 [Tom Occhino](https://github.com/tomocchino)와 [Adam Wolff](https://github.com/wolffiex)에게 특별한 감사를 드립니다. [React를 다른 언어로 번역한](https://translations.reactjs.org/) 모든 자원봉사자에게도 감사합니다.
 
 ## 특별한 감사 인사 {/*additional-thanks*/}
 

src/content/learn/conditional-rendering.md

@@ -4,7 +4,7 @@ title: 조건부 렌더링
 
 <Intro>
 
-컴포넌트는 조건에 따라 다른 항목을 표시해야 하는 경우가 많습니다. 리액트는 `if` 문, `&&` 및 `? :` 연산자와 같은 자바스크립트 문법을 사용하여 조건부로 JSX를 렌더링할 수 있습니다.
+컴포넌트는 조건에 따라 다른 항목을 표시해야 하는 경우가 많습니다. React는 `if` 문, `&&` 및 `? :` 연산자와 같은 자바스크립트 문법을 사용하여 조건부로 JSX를 렌더링할 수 있습니다.
 
 </Intro>
 
@@ -317,7 +317,7 @@ export default function PackingList() {
 
 **`&&`의 왼쪽에 숫자를 두지 마세요.**
 
-조건을 테스트하기 위해 JavaScript는 자동으로 왼쪽을 부울로 변환합니다. 그러나 왼쪽이 `0`이면 전체 식이 (`0`)을 얻게 되고, 리액트는 아무것도 아닌 `0`을 렌더링할 것입니다.
+조건을 테스트하기 위해 JavaScript는 자동으로 왼쪽을 부울로 변환합니다. 그러나 왼쪽이 `0`이면 전체 식이 (`0`)을 얻게 되고, React는 아무것도 아닌 `0`을 렌더링할 것입니다.
 
 예를 들어, 흔하게 하는 실수로 `messageCount && <p>New messages</p>`와 같은 코드를 작성하는 것입니다. 메시지 카운트가 `0`일 때 아무것도 렌더링하지 않는다고 쉽게 추측할 수 있지만, 실제로는 `0` 자체를 렌더링합니다!
 

src/content/learn/describing-the-ui.md

@@ -546,7 +546,7 @@ React 렌더 트리 예시
 
 </Diagram>
 
-의존성 트리는 종종 빌드 도구에 의해 클라이언트가 다운로드하고 렌더링하는 데 필요한 모든 관련 자바스크립트 코드를 bundle 하는 데에 사용됩니다. 큰 bundle 크기는 리액트 앱의 사용자 경험을 저하합니다. 모듈 의존성 트리를 이해하는 것은 이러한 문제를 디버깅하는 데 도움이 됩니다.
+의존성 트리는 종종 빌드 도구에 의해 클라이언트가 다운로드하고 렌더링하는 데 필요한 모든 관련 자바스크립트 코드를 bundle 하는 데에 사용됩니다. 큰 bundle 크기는 React 앱의 사용자 경험을 저하합니다. 모듈 의존성 트리를 이해하는 것은 이러한 문제를 디버깅하는 데 도움이 됩니다.
 
 <LearnMore path="/learn/understanding-your-ui-as-a-tree">
 

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

@@ -193,23 +193,23 @@ export default function TeaGathering() {
 
 함수형 프로그래밍은 순수성에 크게 의존하지만, 언젠가는, 어딘가에서, _무언가가_ 바뀌어야 합니다. 그것이 프로그래밍의 요점입니다! 이러한 변화들-화면을 업데이트하고, 애니메이션을 시작하고, 데이터를 변경하는 것을 **사이드 이펙트**라고 합니다. 렌더링중에 발생하는 것이 아니라 _"사이드에서,"_ 발생하는 현상입니다.
 
-리액트에선, **사이드 이펙트는 보통 [이벤트 핸들러](/learn/responding-to-events)에 포함됩니다.** 이벤트 핸들러는 리액트가 일부 작업을 수행할 때 반응하는 기능입니다-예를 들면 버튼을 클릭할 때처럼 말이죠. 이벤트 핸들러가 컴포넌트 _내부에_ 정의되었다 하더라도 렌더링 _중에는_ 실행되지 않습니다! **그래서 이벤트 핸들러는 순수할 필요가 없습니다.**
+React에선, **사이드 이펙트는 보통 [이벤트 핸들러](/learn/responding-to-events)에 포함됩니다.** 이벤트 핸들러는 React가 일부 작업을 수행할 때 반응하는 기능입니다-예를 들면 버튼을 클릭할 때처럼 말이죠. 이벤트 핸들러가 컴포넌트 _내부에_ 정의되었다 하더라도 렌더링 _중에는_ 실행되지 않습니다! **그래서 이벤트 핸들러는 순수할 필요가 없습니다.**
 
-다른 옵션을 모두 사용했지만 사이드 이펙트에 적합한 이벤트 핸들러를 찾을 수 없는 경우에도, 컴포넌트에서 [`useEffect`](/reference/react/useEffect) 호출을 사용하여 반환된 JSX에 해당 이벤트 핸들러를 연결할 수 있습니다. 이것은 리액트에게 사이드 이펙트가 허용될 때 렌더링 후 나중에 실행하도록 지시합니다. **그러나 이 접근 방식이 마지막 수단이 되어야 합니다.**
+다른 옵션을 모두 사용했지만 사이드 이펙트에 적합한 이벤트 핸들러를 찾을 수 없는 경우에도, 컴포넌트에서 [`useEffect`](/reference/react/useEffect) 호출을 사용하여 반환된 JSX에 해당 이벤트 핸들러를 연결할 수 있습니다. 이것은 React에게 사이드 이펙트가 허용될 때 렌더링 후 나중에 실행하도록 지시합니다. **그러나 이 접근 방식이 마지막 수단이 되어야 합니다.**
 
 가능하면 렌더링만으로 로직을 표현해 보세요. 이것이 당신을 얼마나 더 나아가게 할 수 있는지 알면 놀라게 될겁니다!
 
 <DeepDive>
 
-#### 리액트는 왜 순수함을 신경쓸까요? {/*why-does-react-care-about-purity*/}
+#### React는 왜 순수함을 신경쓸까요? {/*why-does-react-care-about-purity*/}
 
 순수 함수를 작성하려면 약간의 습관과 훈련이 필요합니다. 그러나 이건 또한 놀라운 기회를 열어줍니다.
 
 * 컴포넌트는 다른 환경에서도 실행될 수 있습니다- 예를 들면 서버에서 말이죠! 동일한 입력에 대해 동일한 결과를 반환하기 때문에 하나의 컴포넌트는 많은 사용자 요청을 처리할 수 있습니다.
 * 입력이 변경되지 않은 컴포넌트 [렌더링을 건너뛰어](/reference/react/memo) 성능을 향상시킬 수 있습니다. 순수 함수는 항상 동일한 결과를 반환하므로 캐시하기에 안전합니다.
 * 깊은 컴포넌트 트리를 렌더링하는 도중에 일부 데이터가 변경되는 경우 React는 오래된 렌더링을 완료하는 데 시간을 낭비하지 않고 렌더링을 다시 시작할 수 있습니다. 순수함은 언제든지 연산을 중단하는 것을 안전하게 합니다.
 
-우리가 구축하고 있는 모든 새로운 리액트 기능은 순수성을 활용합니다. 데이터 가져오기에서 애니메이션, 성능에 이르기까지 컴포넌트를 순수하게 유지하면 리액트 패러다임의 힘이 발휘됩니다.
+우리가 구축하고 있는 모든 새로운 React 기능은 순수성을 활용합니다. 데이터 가져오기에서 애니메이션, 성능에 이르기까지 컴포넌트를 순수하게 유지하면 React 패러다임의 힘이 발휘됩니다.
 
 </DeepDive>
 
@@ -571,7 +571,7 @@ h1 { margin: 5px; font-size: 18px; }
 
 </Sandpack>
 
-리액트는 컴포넌트 함수가 특정 순서로 실행된다는 것을 보장하지 않기 때문에 변수를 설정해서 컴포넌트 함수간에 통신할 수 없습니다. 모든 커뮤니케이션은 프로퍼티를 통해 이루어져야 합니다.
+React는 컴포넌트 함수가 특정 순서로 실행된다는 것을 보장하지 않기 때문에 변수를 설정해서 컴포넌트 함수간에 통신할 수 없습니다. 모든 커뮤니케이션은 프로퍼티를 통해 이루어져야 합니다.
 
 </Solution>
 

src/content/learn/reacting-to-input-with-state.md

@@ -4,7 +4,7 @@ title: State를 사용해 Input 다루기
 
 <Intro>
 
-리액트는 선언적인 방식으로 UI를 조작합니다. 개별적인 UI를 직접 조작하는 것 대신에 컴포넌트 내부에 여러 state를 묘사하고 사용자의 입력에 따라 state를 변경합니다. 이는 디자이너가 UI를 바라보는 방식과 비슷합니다.
+React는 선언적인 방식으로 UI를 조작합니다. 개별적인 UI를 직접 조작하는 것 대신에 컴포넌트 내부에 여러 state를 묘사하고 사용자의 입력에 따라 state를 변경합니다. 이는 디자이너가 UI를 바라보는 방식과 비슷합니다.
 
 </Intro>
 
@@ -31,7 +31,7 @@ UI 상호작용을 디자인할 때 사용자가 액션을 하면 어떻게 UI
 
 옆에 탄 운전기사는 당신이 어디를 가고싶어 하는지 모릅니다. 그저 명령에 따를 뿐이죠. (잘못된 지시를 하면 잘못된 곳에 도착하고 말겁니다.) 우리가 이것을 *명령형*이라 부르는 이유입니다. 왜냐하면 컴퓨터에게 스피너부터 버튼까지 각각의 요소에 UI를 *어떻게* 업데이트 해야할지 "명령"을 내려야하기 때문이죠.
 
-아래의 명령형 UI 프로그래밍 예시는 리액트 *없이* 만들어진 폼입니다. 브라우저에 내장된 [DOM](https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model)을 사용했습니다.
+아래의 명령형 UI 프로그래밍 예시는 React *없이* 만들어진 폼입니다. 브라우저에 내장된 [DOM](https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model)을 사용했습니다.
 
 <Sandpack>
 
@@ -133,15 +133,15 @@ body { font-family: sans-serif; margin: 20px; padding: 0; }
 
 위의 예시에서는 문제가 없겠지만 위와 같이 UI를 조작하면 더 복잡한 시스템에서는 난이도가 기하급수적으로 올라갑니다. 여러 다른 폼으로 가득 찬 페이지를 업데이트해야 한다고 생각해보세요. 새로운 UI 요소나 새로운 상호작용을 추가하려면 버그의 발생을 막기 위해 기존의 모든 코드를 주의 깊게 살펴봐야만 할 겁니다. (예를 들면 어떤 것을 보여주거나 숨기거나 하는 것을 잊을지도 모릅니다).
 
-리액트는 이러한 문제점을 해결하기 위해 만들어졌습니다.
+React는 이러한 문제점을 해결하기 위해 만들어졌습니다.
 
-리액트에서는 직접 UI를 조작할 필요가 없습니다. 컴포넌트를 직접 활성화하거나 비활성화하거나 보여주거나 숨길 필요가 없습니다. 대신에 **무엇을 보여주고 싶은지 선언**하기만 하면 됩니다. 그러면 리액트는 어떻게 UI를 업데이트 해야 할지 이해할 것입니다. 택시를 탄다고 생각해 봅시다. 운전기사에게 어디서 꺾어야 할지 알려주는게 아니라 가고 싶은 곳을 말한다고 생각해 보세요. 당신을 거기까지 데려다주는 것은 운전기사의 일이고 운전기사는 어쩌면 당신이 몰랐던 지름길을 알고 있을지도 모릅니다!
+React에서는 직접 UI를 조작할 필요가 없습니다. 컴포넌트를 직접 활성화하거나 비활성화하거나 보여주거나 숨길 필요가 없습니다. 대신에 **무엇을 보여주고 싶은지 선언**하기만 하면 됩니다. 그러면 React는 어떻게 UI를 업데이트 해야 할지 이해할 것입니다. 택시를 탄다고 생각해 봅시다. 운전기사에게 어디서 꺾어야 할지 알려주는게 아니라 가고 싶은 곳을 말한다고 생각해 보세요. 당신을 거기까지 데려다주는 것은 운전기사의 일이고 운전기사는 어쩌면 당신이 몰랐던 지름길을 알고 있을지도 모릅니다!
 
 <Illustration src="/images/docs/illustrations/i_declarative-ui-programming.png" alt="In a car driven by React, a passenger asks to be taken to a specific place on the map. React figures out how to do that." />
 
 ## UI를 선언적인 방식으로 생각하기 {/*thinking-about-ui-declaratively*/}
 
-지금까지 폼을 선언적인 방식으로 구현하는 방법을 살펴보았습니다. 리액트처럼 생각하는 방법을 더 잘 이해하기 위해 UI를 리액트에서 다시 구현하는 과정을 아래에서 살펴봅시다.
+지금까지 폼을 선언적인 방식으로 구현하는 방법을 살펴보았습니다. React처럼 생각하는 방법을 더 잘 이해하기 위해 UI를 React에서 다시 구현하는 과정을 아래에서 살펴봅시다.
 
 1. 컴포넌트의 다양한 시각적 state를 **확인하세요.**
 2. 무엇이 state 변화를 트리거하는지 **알아내세요.**
@@ -151,7 +151,7 @@ body { font-family: sans-serif; margin: 20px; padding: 0; }
 
 ## 첫 번째: 컴포넌트의 다양한 시각적 state 확인하기 {/*step-1-identify-your-components-different-visual-states*/}
 
-여러가지 "state"를 가지고 있는 ["상태 기계"](https://ko.wikipedia.org/wiki/유한_상태_기계)라는 것을 컴퓨터 과학에서 들어본 적이 있을 것입니다. 그리고 디자이너와 일한다면 다양한 "시각적 state"에 관한 모형을 본 적이 있을 것입니다. 리액트는 디자인과 컴퓨터 과학의 사이에 있기 때문에 두 아이디어 모두에서 영감을 받았습니다.
+여러가지 "state"를 가지고 있는 ["상태 기계"](https://ko.wikipedia.org/wiki/유한_상태_기계)라는 것을 컴퓨터 과학에서 들어본 적이 있을 것입니다. 그리고 디자이너와 일한다면 다양한 "시각적 state"에 관한 모형을 본 적이 있을 것입니다. React는 디자인과 컴퓨터 과학의 사이에 있기 때문에 두 아이디어 모두에서 영감을 받았습니다.
 
 먼저 사용자가 볼 수 있는 UI의 모든 "state"를 시각화해야 합니다.
 
@@ -558,7 +558,7 @@ body { margin: 0; padding: 0; height: 250px; }
 * 이미지가 활성화되었을 때 CSS 클래스는 `background`와 `picture picture--active`가 됩니다.
 * 이미지가 비활성화되었을 때 CSS 클래스는 `background background--active`와 `picture`가 됩니다.
 
-이미지의 활성화 state를 기억하기 위해서는 하나의 boolean state 변수로 충분합니다. 원래 하려고 했던 것은 CSS 클래스를 제거하거나 추가하는 것이었습니다. 하지만 리액트에서는 UI 요소를 *조작하는 것* 보다는 무엇을 보여주길 원하는지 *묘사하는 것*이 필요합니다. 그렇기 때문에 현재 state를 기반으로 두 CSS 클래스 모두를 계산해야 합니다. 그리고 이미지를 클릭했을 때 배경이 클릭되지 않도록 이벤트의 [전파를 막을](/learn/responding-to-events#stopping-propagation) 필요가 있습니다.
+이미지의 활성화 state를 기억하기 위해서는 하나의 boolean state 변수로 충분합니다. 원래 하려고 했던 것은 CSS 클래스를 제거하거나 추가하는 것이었습니다. 하지만 React에서는 UI 요소를 *조작하는 것* 보다는 무엇을 보여주길 원하는지 *묘사하는 것*이 필요합니다. 그렇기 때문에 현재 state를 기반으로 두 CSS 클래스 모두를 계산해야 합니다. 그리고 이미지를 클릭했을 때 배경이 클릭되지 않도록 이벤트의 [전파를 막을](/learn/responding-to-events#stopping-propagation) 필요가 있습니다.
 
 이미지를 클릭한 다음 이미지 외부도 클릭해 잘 작동하는지 확인해봅시다.
 
@@ -799,7 +799,7 @@ label { display: block; margin-bottom: 20px; }
 
 이 폼은 두 가지 모드를 가지고 있습니다. 하나는 편집 모드이고 이때 인풋들을 볼 수 있습니다. 또 다른 하나는 보기 모드이고 이때는 오직 결과만 볼 수 있습니다. 버튼의 라벨은 속한 모드에 따라 "Edit"과 "Save"로 변경됩니다. 또한 인풋들의 내용을 변경할 때 환영 메시지를 실시간으로 확인할 수 있습니다.
 
-당신의 목적은 아래 샌드박스에서 리액트로 다시 구현하는 것입니다. 편의를 위해 마크업은 이미 JSX로 변환되어 있습니다. 하지만 원래 구현돼있던 것처럼 인풋들을 보여주고 숨기는 것은 직접 구현해야 합니다.
+당신의 목적은 아래 샌드박스에서 React로 다시 구현하는 것입니다. 편의를 위해 마크업은 이미 JSX로 변환되어 있습니다. 하지만 원래 구현돼있던 것처럼 인풋들을 보여주고 숨기는 것은 직접 구현해야 합니다.
 
 마찬가지로 아래에 있는 텍스트도 업데이트시켜야 합니다!
 
@@ -900,9 +900,9 @@ label { display: block; margin-bottom: 20px; }
 
 </Solution>
 
-#### 명령형 코드를 리액트 없이 리팩토링하기 {/*refactor-the-imperative-solution-without-react*/}
+#### 명령형 코드를 React 없이 리팩토링하기 {/*refactor-the-imperative-solution-without-react*/}
 
-여기 리액트 없이 명령형으로 작성된 챌린지 이전의 코드가 있습니다.
+여기 React 없이 명령형으로 작성된 챌린지 이전의 코드가 있습니다.
 
 <Sandpack>
 
@@ -999,7 +999,7 @@ label { display: block; margin-bottom: 20px; }
 
 </Sandpack>
 
-리액트가 없다고 상상해보세요. 이 로직을 조금 더 견고하고 리액트와 비슷하게 리팩토링할 수 있을까요? 리액트에서처럼 state를 명시적으로 표현하면 어떻게 보일까요?
+React가 없다고 상상해보세요. 이 로직을 조금 더 견고하고 React와 비슷하게 리팩토링할 수 있을까요? React에서처럼 state를 명시적으로 표현하면 어떻게 보일까요?
 
 어디서부터 시작해야할지 고민 중이라면 아래에 구조를 미리 만들어 두었습니다. 아래 구조에서 시작한다면 비어있는 `updateDOM` 함수 로직을 작성해보세요. (필요에 따라 원래 코드를 참조하시면 됩니다.)
 
@@ -1225,7 +1225,7 @@ label { display: block; margin-bottom: 20px; }
 
 </Sandpack>
 
-작성된 `updateDOM` 함수는 리액트가 state를 설정할 때 어떤 작업을 수행하는지 보여줍니다. (하지만 리액트는 마지막으로 state가 설정된 이후 변경되지 않은 속성에 대해서는 DOM을 건드리지 않습니다.)
+작성된 `updateDOM` 함수는 React가 state를 설정할 때 어떤 작업을 수행하는지 보여줍니다. (하지만 React는 마지막으로 state가 설정된 이후 변경되지 않은 속성에 대해서는 DOM을 건드리지 않습니다.)
 
 </Solution>
 

src/content/learn/render-and-commit.md

@@ -4,7 +4,7 @@ title: 렌더링 그리고 커밋
 
 <Intro>
 
-컴포넌트를 화면에 표시하기 이전에 React에서 렌더링을 해야 합니다. 해당 과정의 단계를 이해하면 코드가 어떻게 실행되는지 이해할 수 있고 리액트 렌더링 동작에 관해 설명하는데 도움이 됩니다.
+컴포넌트를 화면에 표시하기 이전에 React에서 렌더링을 해야 합니다. 해당 과정의 단계를 이해하면 코드가 어떻게 실행되는지 이해할 수 있고 React 렌더링 동작에 관해 설명하는데 도움이 됩니다.
 
 </Intro>