docs: update hooks.md

Author: lumirlumir

src/content/reference/react/hooks.md

@@ -1,5 +1,5 @@
 ---
-title: "내장된 React Hook"
+title: "내장 React Hook"
 ---
 
 <Intro>
@@ -12,12 +12,12 @@ title: "내장된 React Hook"
 
 ## State Hooks {/*state-hooks*/}
 
-*State*를 통해 컴포넌트는 [사용자 입력과 같은 정보를 "기억"할 수 있습니다.](/learn/state-a-components-memory) 예를 들어, 폼 컴포넌트는 state를 사용하여 입력값을 저장할 수 있고, 이미지 갤러리 컴포넌트는 state를 사용하여 선택한 이미지 인덱스를 저장할 수 있습니다.
+*State*를 통해 컴포넌트는 [사용자 입력과 같은 정보를 "기억"할 수 있습니다.](/learn/state-a-components-memory) 예를 들어, 폼 컴포넌트는 State를 사용하여 입력값을 저장할 수 있고, 이미지 갤러리 컴포넌트는 State를 사용하여 선택한 이미지 인덱스를 저장할 수 있습니다.
 
-컴포넌트에 state를 추가하려면, 다음 Hook 중 하나를 사용하세요.
+컴포넌트에 State를 추가하려면, 다음 Hook 중 하나를 사용하세요.
 
-* [`useState`](/reference/react/useState)는 직접 업데이트할 수 있는 state 변수를 선언합니다.
-* [`useReducer`](/reference/react/useReducer)는 [reducer 함수](/learn/extracting-state-logic-into-a-reducer) 내부의 업데이트 로직을 사용하여 state 변수를 선언합니다.
+* [`useState`](/reference/react/useState)는 직접 업데이트할 수 있는 State 변수를 선언합니다.
+* [`useReducer`](/reference/react/useReducer)는 [Reducer 함수](/learn/extracting-state-logic-into-a-reducer) 내부의 업데이트 로직을 사용하여 State 변수를 선언합니다.
 
 ```js
 function ImageGallery() {
@@ -29,9 +29,9 @@ function ImageGallery() {
 
 ## Context Hooks {/*context-hooks*/}
 
-*Context*를 사용하면 컴포넌트가 [멀리 있는 부모 컴포넌트로부터 props로 전달하지 않으면서 정보를 받을 수 있습니다.](/learn/passing-props-to-a-component) 예를 들어, 애플리케이션의 최상위 컴포넌트는 현재 UI 테마를 아래의 모든 컴포넌트에 깊이와 상관없이 전달할 수 있습니다.
+*Context*는 컴포넌트가 [Props를 전달하지 않고도 멀리 있는 부모 컴포넌트로부터 정보를 받을 수 있게 해줍니다.](/learn/passing-props-to-a-component) 예를 들어, 애플리케이션의 최상위 컴포넌트는 현재 UI 테마를 아래의 모든 컴포넌트에 깊이와 상관없이 전달할 수 있습니다.
 
-* [`useContext`](/reference/react/useContext)는 context를 읽고 구독합니다.
+* [`useContext`](/reference/react/useContext)는 Context를 읽고 구독합니다.
 
 ```js
 function Button() {
@@ -43,10 +43,10 @@ function Button() {
 
 ## Ref Hooks {/*ref-hooks*/}
 
-*Ref*를 사용하면 컴포넌트가 DOM 노드나 timeout ID와 같이 [렌더링에 사용되지 않는 일부 정보를 보유할 수 있습니다.](/learn/referencing-values-with-refs) state와 달리, ref를 업데이트해도 컴포넌트가 다시 렌더링 되지 않습니다. Ref는 React 패러다임의 "탈출구"입니다. 내장된 브라우저 API와 같이, React가 아닌 시스템으로 작업해야 할 때 유용합니다.
+*Ref*를 사용하면 컴포넌트가 DOM 노드나 Timeout ID와 같이 [렌더링에 사용되지 않는 일부 정보를 보유할 수 있습니다.](/learn/referencing-values-with-refs) State와 달리, Ref는 업데이트를 해도 컴포넌트가 다시 렌더링 되지 않습니다. Ref는 React 패러다임의 "탈출구"입니다. 내장된 브라우저 API와 같이, React가 아닌 시스템으로 작업해야 할 때 유용합니다.
 
-* [`useRef`](/reference/react/useRef)는 ref를 선언합니다. 여기에는 어떤 값이라도 담을 수 있지만, 대부분 DOM 노드를 담는 데 사용됩니다.
-* [`useImperativeHandle`](/reference/react/useImperativeHandle)을 사용하면 컴포넌트에 노출되는 ref를 커스텀할 수 있습니다. 이는 드물게 사용됩니다.
+* [`useRef`](/reference/react/useRef)는 Ref를 선언합니다. 여기에는 어떤 값이라도 담을 수 있지만, 대부분 DOM 노드를 담는 데 사용됩니다.
+* [`useImperativeHandle`](/reference/react/useImperativeHandle)을 사용하면 컴포넌트에 노출되는 Ref를 커스텀할 수 있습니다. 이는 드물게 사용됩니다.
 
 ```js
 function Form() {
@@ -58,7 +58,7 @@ function Form() {
 
 ## Effect Hooks {/*effect-hooks*/}
 
-*Effects*를 통해 컴포넌트를 [외부 시스템에 연결하고 동기화할 수 있습니다.](/learn/synchronizing-with-effects) 여기에는 네트워크, 브라우저 DOM, 애니메이션, 다른 UI 라이브러리를 사용하여 작성된 위젯, 기타 React가 아닌 코드를 다루는 것이 포함됩니다.
+*Effect*를 통해 컴포넌트를 [외부 시스템에 연결하고 동기화할 수 있습니다.](/learn/synchronizing-with-effects) 여기에는 네트워크, 브라우저 DOM, 애니메이션, 다른 UI 라이브러리를 사용하여 작성된 위젯, 기타 React가 아닌 코드를 다루는 것이 포함됩니다.
 
 * [`useEffect`](/reference/react/useEffect)는 컴포넌트를 외부 시스템에 연결합니다.
 
@@ -74,7 +74,7 @@ function ChatRoom({ roomId }) {
 
 Effect는 React 패러다임의 "탈출구"입니다. 애플리케이션의 데이터 흐름을 조정하기 위해 Effect를 쓰지 마세요. 외부 시스템과 상호작용하지 않는다면, [Effect가 필요하지 않을 수도 있습니다.](/learn/you-might-not-need-an-effect)
 
-`useEffect`에는 타이밍 차이가 있지만 거의 사용되지 않는 두 가지 변형이 있습니다.
+타이밍에서 차이가 있는 `useEffect`의 두 가지 드물게 사용되는 변형이 있습니다.
 
 * [`useLayoutEffect`](/reference/react/useLayoutEffect)는 브라우저가 화면을 다시 그리기 전에 실행됩니다. 여기에서 레이아웃을 계산할 수 있습니다.
 * [`useInsertionEffect`](/reference/react/useInsertionEffect)는 React가 DOM을 변경하기 전에 실행됩니다. 라이브러리는 여기에 동적 CSS를 삽입할 수 있습니다.
@@ -97,23 +97,23 @@ function TodoList({ todos, tab, theme }) {
 }
 ```
 
-화면을 실제로 업데이트해야 하므로 재렌더링을 건너뛸 수 없는 경우도 있습니다. 이 경우, 동기식이어야 하는 blocking 업데이트(예: input에 입력)와 사용자 인터페이스를 차단할 필요가 없는 non-blocking 업데이트(예: 차트 업데이트)를 분리하여 성능을 향상시킬 수 있습니다.
+화면을 실제로 업데이트해야 하므로 재렌더링을 건너뛸 수 없는 경우도 있습니다. 이 경우, 동기식이어야 하는 Blocking 업데이트(예: Input에 입력)와 사용자 인터페이스를 차단할 필요가 없는 Non-Blocking 업데이트(예: 차트 업데이트)를 분리하여 성능을 향상시킬 수 있습니다.
 
 렌더링 우선순위를 지정하려면, 다음 Hook 중 하나를 사용하세요.
 
-- [`useTransition`](/reference/react/useTransition)을 사용하면 state 전환을 non-blocking으로 표시하고, 다른 업데이트가 이를 중단하도록 허용할 수 있습니다.
-- [`useDeferredValue`](/reference/react/useDeferredValue)를 사용하면 UI의 중요하지 않은 부분에 대한 업데이트를 연기하고, 다른 부분이 먼저 업데이트되도록 할 수 있습니다.
+- [`useTransition`](/reference/react/useTransition)을 사용하면 State 전환을 Non-Blocking으로 표시하고, 다른 업데이트가 이를 중단하도록 허용할 수 있습니다.
+- [`useDeferredValue`](/reference/react/useDeferredValue)를 사용하면 UI의 중요하지 않은 부분에 대한 업데이트를 지연하고, 다른 부분이 먼저 업데이트되도록 할 수 있습니다.
 
 ---
 
 ## Other Hooks {/*other-hooks*/}
 
 다음 Hook은 대부분 라이브러리 작성자에게 유용하며 애플리케이션 코드에서는 일반적으로 사용되지 않습니다.
 
-- [`useDebugValue`](/reference/react/useDebugValue)를 사용하면 커스텀 Hook에 대해 React DevTools에 표시해 주는 레이블을 커스텀할 수 있습니다.
+- [`useDebugValue`](/reference/react/useDebugValue)를 사용하면 커스텀 Hook에 대해 React 개발자 도구에 표시하는 레이블을 커스텀할 수 있습니다.
 - [`useId`](/reference/react/useId)를 사용하면 컴포넌트가 고유 ID를 자신과 연결할 수 있습니다. 일반적으로 접근성 API와 함께 사용됩니다.
 - [`useSyncExternalStore`](/reference/react/useSyncExternalStore)를 사용하면 컴포넌트가 외부 저장소를 구독할 수 있습니다.
-* [`useActionState`](/reference/react/useActionState) 를 사용하면 액션을 통해 상태를 관리할 수 있습니다.
+* [`useActionState`](/reference/react/useActionState)를 사용하면 액션을 통해 State를 관리할 수 있습니다.
 
 ---