docs: fix typos

Author: lumirlumir

src/content/learn/escape-hatches.md

@@ -23,13 +23,13 @@ title: 탈출구
 
 ## Ref로 값 참조하기 {/*referencing-values-with-refs*/}
 
-컴포넌트가 일부 정보를 "기억"하고 싶지만, 해당 정보가 [렌더링을 유발](/learn/render-and-commit)하지 않도록 하려면 ref를 사용하세요.
+컴포넌트가 일부 정보를 "기억"하고 싶지만, 해당 정보가 [렌더링을 유발](/learn/render-and-commit)하지 않도록 하려면 Ref를 사용하세요.
 
 ```js
 const ref = useRef(0);
 ```
 
-state처럼 ref는 다시 렌더링하는 사이에 React에 의해 유지됩니다. 다만 state의 설정은 컴포넌트가 다시 렌더링 되지만, ref의 변경은 그렇지 않습니다! `ref.current` 프로퍼티를 통해 해당 ref의 현재 값에 접근할 수 있습니다.
+State처럼 Ref는 다시 렌더링하는 사이에 React에 의해 유지됩니다. 다만 State의 설정은 컴포넌트를 다시 렌더링 하지만, Ref의 변경은 그렇지 않습니다! `ref.current` 프로퍼티를 통해 해당 Ref의 현재 값에 접근할 수 있습니다.
 
 <Sandpack>
 
@@ -54,17 +54,17 @@ export default function Counter() {
 
 </Sandpack>
 
-ref는 React가 추적하지 않는 컴포넌트의 비밀 주머니와 같습니다. 예를 들어 ref를 사용하여 컴포넌트의 렌더링 출력에 영향을 주지 않는 [timeout ID](https://developer.mozilla.org/en-US/docs/Web/API/setTimeout#return_value), [DOM 엘리먼트](https://developer.mozilla.org/en-US/docs/Web/API/Element) 및 기타 객체를 저장할 수 있습니다.
+Ref는 React가 추적하지 않는 컴포넌트의 비밀 주머니와 같습니다. 예를 들어 Ref를 사용하여 컴포넌트의 렌더링 출력에 영향을 주지 않는 [Timeout ID](https://developer.mozilla.org/en-US/docs/Web/API/setTimeout#return_value), [DOM 엘리먼트](https://developer.mozilla.org/en-US/docs/Web/API/Element) 및 기타 객체를 저장할 수 있습니다.
 
 <LearnMore path="/learn/referencing-values-with-refs">
 
-ref를 사용하여 정보를 기억하는 방법을 배우려면 **[Ref로 값 참조하기](/learn/referencing-values-with-refs)** 를 읽어보세요.
+Ref를 사용하여 정보를 기억하는 방법을 배우려면 <strong>[Ref로 값 참조하기](/learn/referencing-values-with-refs)</strong>를 읽어보세요.
 
 </LearnMore>
 
 ## Ref로 DOM 조작하기 {/*manipulating-the-dom-with-refs*/}
 
-React는 렌더링 결과물에 맞춰 DOM 변경을 자동으로 처리하기 때문에 컴포넌트에서 자주 DOM을 조작해야 할 필요는 없습니다. 하지만 가끔 특정 노드에 포커스를 옮기거나, 스크롤 위치를 옮기거나, 위치와 크기를 측정하기 위해서 React가 관리하는 DOM 요소에 접근해야 할 때가 있습니다. React는 이런 작업을 수행하는 내장 방법을 제공하지 않기 때문에 DOM 노드에 접근하기 위한 ref가 필요할 것입니다. 예를 들어 버튼을 클릭하면 ref를 사용해 input에 포커스를 옮길 것입니다.
+React는 렌더링 결과물에 맞춰 DOM 변경을 자동으로 처리하기 때문에 컴포넌트에서 자주 DOM을 조작해야 할 필요는 없습니다. 하지만 가끔 특정 노드에 포커스를 옮기거나, 스크롤 위치를 옮기거나, 위치와 크기를 측정하기 위해서 React가 관리하는 DOM 요소에 접근해야 할 때가 있습니다. React는 이런 작업을 수행하는 내장 방법을 제공하지 않기 때문에 DOM 노드에 접근하기 위한 Ref가 필요할 것입니다. 예를 들어 버튼을 클릭하면 Ref를 사용해 input에 포커스를 옮길 것입니다.
 
 <Sandpack>
 
@@ -93,15 +93,15 @@ export default function Form() {
 
 <LearnMore path="/learn/manipulating-the-dom-with-refs">
 
-React가 관리하는 DOM 엘리먼트에 접근하는 방법을 배우려면 **[Ref로 DOM 조작하기](/learn/manipulating-the-dom-with-refs)** 를 읽어보세요.
+React가 관리하는 DOM 엘리먼트에 접근하는 방법을 배우려면 <strong>[Ref로 DOM 조작하기](/learn/manipulating-the-dom-with-refs)</strong>를 읽어보세요.
 
 </LearnMore>
 
 ## Effect로 값 동기화하기 {/*synchronizing-with-effects*/}
 
-일부 컴포넌트는 외부 시스템과 동기화해야 합니다. 예를 들어 React state에 따라 React가 아닌 컴포넌트를 제어하거나, 채팅 서버에 대한 연결을 설정하거나, 컴포넌트가 화면에 나타났을 때 분석 로그를 보낼 수 있습니다. 특정 이벤트를 처리하는 이벤트 핸들러와 달리 Effect는 렌더링 후 일부 코드를 실행합니다. 컴포넌트를 React 외부 시스템과 동기화할 때 이를 사용하세요.
+일부 컴포넌트는 외부 시스템과 동기화해야 합니다. 예를 들어 React State에 따라 React가 아닌 컴포넌트를 제어하거나, 채팅 서버에 대한 연결을 설정하거나, 컴포넌트가 화면에 나타났을 때 분석 로그를 보낼 수 있습니다. 특정 이벤트를 처리하는 이벤트 핸들러와 달리 Effect는 렌더링 후 일부 코드를 실행합니다. 컴포넌트를 React 외부 시스템과 동기화할 때 이를 사용하세요.
 
-Play/Pause를 몇 번 누르고 비디오 플레이어가 `isPlaying` prop 값에 어떻게 동기화되는지 확인하세요.
+Play/Pause를 몇 번 누르고 비디오 플레이어가 `isPlaying` Prop 값을 어떻게 동기화하는지 확인하세요.
 
 <Sandpack>
 
@@ -145,7 +145,7 @@ video { width: 250px; }
 
 </Sandpack>
 
-많은 Effect는 스스로 "클린업"하기도 합니다. 예를 들어 채팅 서버에 대한 연결을 설정하는 Effect는 해당 서버에서 컴포넌트의 연결을 끊는 방법을 React에 알려주는 *클린업 함수* 를 반환해야 합니다.
+많은 Effect는 스스로 "클린업"하기도 합니다. 예를 들어 채팅 서버에 대한 연결을 설정하는 Effect는 해당 서버에서 컴포넌트의 연결을 끊는 방법을 React에 알려주는 <em>클린업 함수</em>를 반환해야 합니다.
 
 <Sandpack>
 
@@ -183,23 +183,23 @@ input { display: block; margin-bottom: 20px; }
 
 </Sandpack>
 
-개발 모드에서 React는 즉시 실행되고 Effect를 한 번 더 클린업합니다. 그래서 `"✅ Connecting..."`이 두 번 인쇄되는 것입니다. 이렇게 하여 클린업 함수를 구현하는 것을 잊지 않도록 합니다.
+개발 모드에서 React는 즉시 실행되고 Effect를 한 번 더 클린업합니다. 그래서 `"✅ Connecting..."`을 두 번 출력하는 것입니다. 이렇게 하여 클린업 함수를 구현하는 것을 잊지 않도록 합니다.
 
 <LearnMore path="/learn/synchronizing-with-effects">
 
-컴포넌트를 외부 시스템과 동기화하는 방법을 배우려면 **[Effect로 값 동기화하기](/learn/synchronizing-with-effects)** 를 읽어보세요.
+컴포넌트를 외부 시스템과 동기화하는 방법을 배우려면 <strong>[Effect로 동기화하기](/learn/synchronizing-with-effects)</strong>를 읽어보세요.
 
 </LearnMore>
 
 ## Effect가 필요하지 않은 경우 {/*you-might-not-need-an-effect*/}
 
-Effect는 React 패러다임에서 벗어날 수 있는 탈출구입니다. Effect를 사용하면 React를 "벗어나" 컴포넌트를 외부 시스템과 동기화할 수 있습니다. 외부 시스템이 관여하지 않는 경우 (예를 들어 일부 props 또는 state가 변경될 때 컴포넌트의 state를 업데이트하려는 경우) Effect가 필요하지 않습니다. 불필요한 Effect를 제거하면 코드를 더 쉽게 따라갈 수 있고, 실행 속도가 빨라지며, 에러 발생 가능성이 줄어듭니다.
+Effect는 React 패러다임에서 벗어날 수 있는 탈출구입니다. Effect를 사용하면 React를 "벗어나" 컴포넌트를 외부 시스템과 동기화할 수 있습니다. 외부 시스템이 관여하지 않는 경우 (예를 들어 일부 Props 또는 State가 변경될 때 컴포넌트의 State를 업데이트하려는 경우) Effect가 필요하지 않습니다. 불필요한 Effect를 제거하면 코드를 더 쉽게 따라갈 수 있고, 실행 속도가 빨라지며, 에러 발생 가능성이 줄어듭니다.
 
 Effect가 필요하지 않은 두 가지 일반적인 경우가 있습니다.
 - **렌더링을 위해 데이터를 변환하는 데 Effect가 필요하지 않습니다.**
 - **사용자 이벤트를 처리하는 데 Effect가 필요하지 않습니다.**
 
-예를 들어 다른 state에 따라 일부 state를 조정하는 데는 Effect가 필요하지 않습니다.
+예를 들어, 다른 State에 따라 일부 State를 조정하는 데는 Effect가 필요하지 않습니다.
 
 ```js {5-9}
 function Form() {
@@ -227,19 +227,19 @@ function Form() {
 }
 ```
 
-그러나 외부 시스템과 동기화하려면 Effects가 *필요* 합니다.
+그러나 외부 시스템과 동기화하려면 Effect가 <em>필요</em>합니다.
 
 <LearnMore path="/learn/you-might-not-need-an-effect">
 
-불필요한 Effect를 제거하는 방법을 배우려면 **[Effect가 필요하지 않은 경우](/learn/you-might-not-need-an-effect)** 를 읽어보세요.
+불필요한 Effect를 제거하는 방법을 배우려면 <strong>[Effect가 필요하지 않은 경우](/learn/you-might-not-need-an-effect)</strong>를 읽어보세요.
 
 </LearnMore>
 
 ## React Effect의 생명주기 {/*lifecycle-of-reactive-effects*/}
 
-Effect는 컴포넌트와 다른 생명주기를 가집니다. 컴포넌트는 마운트, 업데이트 또는 마운트 해제할 수 있습니다. 반면 Effect는 동기화를 시작하거나 후에 동기화를 중지하는 두 가지 작업만 할 수 있습니다. Effect가 시간에 따라 변하는 props와 state에 의존하는 경우 이 주기는 여러 번 발생할 수 있습니다.
+Effect는 컴포넌트와 다른 생명주기를 가집니다. 컴포넌트는 마운트, 업데이트 또는 마운트 해제할 수 있습니다. 반면 Effect는 동기화를 시작하거나 후에 동기화를 중지하는 두 가지 작업만 할 수 있습니다. Effect가 시간에 따라 변하는 Props와 State에 의존하는 경우 이 주기는 여러 번 발생할 수 있습니다.
 
-다음 Effect는 `roomId` prop의 값에 의존합니다. Props는 다시 렌더링할 때 변할 수 있는 *반응형 값* 입니다. `roomId`가 변경되면 Effect가 *다시 동기화* (및 서버에 다시 연결)합니다.
+다음 Effect는 `roomId` Prop의 값에 의존합니다. Props는 다시 렌더링할 때 변할 수 있는 *반응형 값* 입니다. `roomId`가 변경되면 Effect가 *다시 동기화* (및 서버에 다시 연결)합니다.
 
 <Sandpack>
 
@@ -306,7 +306,7 @@ React는 Effect의 의존성을 올바르게 명시했는지 확인하는 린터
 
 <LearnMore path="/learn/lifecycle-of-reactive-effects">
 
-Effect의 생명주기가 컴포넌트와 어떻게 다른지를 배우려면 **[React Effect의 생명주기](/learn/lifecycle-of-reactive-effects)** 를 읽어보세요.
+Effect의 생명주기가 컴포넌트와 어떻게 다른지를 배우려면 <strong>[React Effect의 생명주기](/learn/lifecycle-of-reactive-effects)</strong>를 읽어보세요.
 
 </LearnMore>
 

src/content/learn/lifecycle-of-reactive-effects.md

@@ -1,5 +1,5 @@
 ---
-title: '반응형 effects의 생명주기'
+title: 'React Effect의 생명주기'
 ---
 
 <Intro>

src/content/learn/referencing-values-with-refs.md

@@ -4,7 +4,7 @@ title: 'Ref로 값 참조하기'
 
 <Intro>
 
-컴포넌트가 일부 정보를 "기억"하고 싶지만, 해당 정보가 [렌더링을 유발](/learn/render-and-commit)하지 않도록 하려면 *ref*를 사용하세요.
+컴포넌트가 일부 정보를 "기억"하고 싶지만, 해당 정보가 [렌더링을 유발](/learn/render-and-commit)하지 않도록 하려면 *Ref*를 사용하세요.
 
 </Intro>
 
@@ -17,21 +17,21 @@ title: 'Ref로 값 참조하기'
 
 </YouWillLearn>
 
-## 컴포넌트에 ref를 추가하기 {/*adding-a-ref-to-your-component*/}
+## 컴포넌트에 Ref를 추가하기 {/*adding-a-ref-to-your-component*/}
 
-React에서 `useRef` Hook을 가져와 컴포넌트에 ref를 추가할 수 있습니다.
+React에서 `useRef` Hook을 가져와 컴포넌트에 Ref를 추가할 수 있습니다.
 
 ```js
 import { useRef } from 'react';
 ```
 
-컴포넌트 내에서 `useRef` Hook을 호출하고 참조할 초깃값을 유일한 인자로 전달합니다. 예를 들어 다음은 값 `0`에 대한 ref 입니다.
+컴포넌트 내에서 `useRef` Hook을 호출하고 참조할 초깃값을 유일한 인자로 전달합니다. 예를 들어 다음은 값 `0`에 대한 Ref 입니다.
 
 ```js
 const ref = useRef(0);
 ```
 
-`useRef` 는 다음과 같은 객체를 반환합니다.
+`useRef`는 다음과 같은 객체를 반환합니다.
 
 ```js
 {
@@ -41,7 +41,7 @@ const ref = useRef(0);
 
 <Illustration src="/images/docs/illustrations/i_ref.png" alt="An arrow with 'current' written on it stuffed into a pocket with 'ref' written on it." />
 
-`ref.current` 프로퍼티를 통해 해당 ref의 current 값에 접근할 수 있습니다. 이 값은 의도적으로 변경할 수 있으므로 읽고 쓸 수 있습니다. React가 추적하지 않는 구성 요소의 비밀 주머니라 할 수 있습니다. (이것이 바로 React의 단방향 데이터 흐름에서 "탈출구"가 되는 것입니다--아래에서 자세히 설명하고 있습니다!)
+`ref.current` 프로퍼티를 통해 해당 Ref의 `current` 값에 접근할 수 있습니다. 이 값은 의도적으로 변경할 수 있으므로 읽고 쓸 수 있습니다. React가 추적하지 않는 구성 요소의 비밀 주머니라 할 수 있습니다. (이것이 바로 React의 단방향 데이터 흐름에서 "탈출구"가 되는 것입니다. 아래에서 자세히 설명하고 있습니다!)
 
 여기서 버튼은 클릭할 때마다 `ref.current`를 증가시킵니다.
 
@@ -68,7 +68,7 @@ export default function Counter() {
 
 </Sandpack>
 
-ref는 숫자를 가리키지만, [state](/learn/state-a-components-memory)처럼 문자열, 객체, 심지어 함수 등 모든 것을 가리킬 수 있습니다. state와 달리 ref는 읽고 수정할 수 있는 `current` 프로퍼티를 가진 일반 자바스크립트 객체입니다.
+Ref는 숫자를 가리키지만, [State](/learn/state-a-components-memory)처럼 문자열, 객체, 심지어 함수 등 모든 것을 가리킬 수 있습니다. state와 달리 ref는 읽고 수정할 수 있는 `current` 프로퍼티를 가진 일반 자바스크립트 객체입니다.
 
 **컴포넌트는 모든 증가에 대하여 다시 렌더링 되지 않습니다.** state와 마찬가지로 ref도 React에 리렌더에 의해 유지됩니다. 그러나, state를 설정하면 컴포넌트가 다시 렌더링 됩니다. ref를 변경하면 다시 렌더링 되지 않습니다!
 

src/content/learn/removing-effect-dependencies.md

@@ -1,5 +1,5 @@
 ---
-title: Effect 의존성 제거하기
+title: Effect의 의존성 제거하기
 ---
 
 <Intro>

src/content/learn/you-might-not-need-an-effect.md

@@ -1,5 +1,5 @@
 ---
-title: 'Effect가 필요하지 않을 수도 있습니다'
+title: 'Effect가 필요하지 않은 경우'
 ---
 
 <Intro>