diff --git a/src/content/warnings/invalid-aria-prop.md b/src/content/warnings/invalid-aria-prop.md
index 2d3b4253e..4016ab570 100644
--- a/src/content/warnings/invalid-aria-prop.md
+++ b/src/content/warnings/invalid-aria-prop.md
@@ -1,11 +1,11 @@
 ---
-title: Invalid ARIA Prop Warning
+title: 유효하지 않은 ARIA Prop 경고
 ---
 
-This warning will fire if you attempt to render a DOM element with an `aria-*` prop that does not exist in the Web Accessibility Initiative (WAI) Accessible Rich Internet Application (ARIA) [specification](https://www.w3.org/TR/wai-aria-1.1/#states_and_properties).
+이 경고는 Web Accessibility Initiative (WAI) Accessible Rich Internet Application (ARIA) [명세](https://www.w3.org/TR/wai-aria-1.1/#states_and_properties)에 존재하지 않는 `aria-*` 프로퍼티를 가진 DOM 요소를 렌더링하려고 할 때 발생합니다.
 
-1. If you feel that you are using a valid prop, check the spelling carefully. `aria-labelledby` and `aria-activedescendant` are often misspelled.
+1. 유효한 prop을 사용하고 있다고 생각하는 경우 철자를 주의 깊게 확인해 보세요. `aria-labelledby`와 `aria-activedescendant`는 철자 실수가 잦습니다.
 
-2. If you wrote `aria-role`, you may have meant `role`.
+2. `aria-role`을 작성한 경우 `role`을 사용하려고 한 것일 수 있습니다.
 
-3. Otherwise, if you're on the latest version of React DOM and verified that you're using a valid property name listed in the ARIA specification, please [report a bug](https://github.com/facebook/react/issues/new/choose).
+3. 그렇지 않은 경우, 최신 버전의 React DOM을 사용하고 ARIA 명세에 나열된 유효한 프로퍼티 이름을 사용하고 있는지 확인한 경우 [버그를 보고해 주세요](https://github.com/facebook/react/issues/new/choose).
diff --git a/src/content/warnings/invalid-hook-call-warning.md b/src/content/warnings/invalid-hook-call-warning.md
index 5bbc2bbaa..e7e1ba1a2 100644
--- a/src/content/warnings/invalid-hook-call-warning.md
+++ b/src/content/warnings/invalid-hook-call-warning.md
@@ -1,8 +1,8 @@
 ---
-title: Rules of Hooks
+title: Hooks의 규칙
 ---
 
-You are probably here because you got the following error message:
+아래와 같은 오류 메시지를 받았기 때문에 여기에 오신 것 같습니다:
 
 <ConsoleBlock level="error">
 
@@ -10,51 +10,51 @@ Hooks can only be called inside the body of a function component.
 
 </ConsoleBlock>
 
-There are three common reasons you might be seeing it:
+이 오류 메시지를 보는 이유는 보통 다음과 같습니다:
 
-1. You might be **breaking the Rules of Hooks**.
-2. You might have **mismatching versions** of React and React DOM.
-3. You might have **more than one copy of React** in the same app.
+1. **Hooks의 규칙을 위반**했을 수 있습니다.
+2. React와 React DOM의 **버전이 일치하지 않을** 수 있습니다.
+3. 동일한 앱에서 **여러 개의 React 복사본**이 있을 수 있습니다.
 
-Let's look at each of these cases.
+이러한 경우들을 살펴보겠습니다.
 
-## Breaking Rules of Hooks {/*breaking-rules-of-hooks*/}
+## Hooks의 규칙을 위반 {/*breaking-rules-of-hooks*/}
 
-Functions whose names start with `use` are called [*Hooks*](/reference/react) in React.
+React에서 `use`로 시작하는 함수를 [*Hooks*](/reference/react)라고 합니다.
 
-**Don’t call Hooks inside loops, conditions, or nested functions.** Instead, always use Hooks at the top level of your React function, before any early returns. You can only call Hooks while React is rendering a function component:
+**루프, 조건문 또는 중첩된 함수 내에서 Hooks를 호출하지 마세요.** 대신 Hooks를 항상 React 함수의 최상위 수준에서, return문 전에 사용하세요. Hooks는 React가 함수형 컴포넌트를 렌더링하는 동안에만 호출할 수 있습니다:
 
-* ✅ Call them at the top level in the body of a [function component](/learn/your-first-component).
-* ✅ Call them at the top level in the body of a [custom Hook](/learn/reusing-logic-with-custom-hooks).
+* ✅ [함수형 컴포넌트](/learn/your-first-component)의 본문의 최상위 수준에서 호출하세요.
+* ✅ [사용자정의 Hook](/learn/reusing-logic-with-custom-hooks)의 본문에서 최상위 수준에서 호출하세요.
 
 ```js{2-3,8-9}
 function Counter() {
-  // ✅ Good: top-level in a function component
+  // ✅ 좋은 예: 함수 컴포넌트의 최상위 수준
   const [count, setCount] = useState(0);
   // ...
 }
 
 function useWindowWidth() {
-  // ✅ Good: top-level in a custom Hook
+  // ✅ 좋은 예: 사용자 정의 Hook의 최상위 수준
   const [width, setWidth] = useState(window.innerWidth);
   // ...
 }
 ```
 
-It’s **not** supported to call Hooks (functions starting with `use`) in any other cases, for example:
+그 외의 경우에는 Hooks(이름이 `use`로 시작하는 함수)를 호출하는 것은 지원되지 **않습니다**. 예를 들어:
 
-* 🔴 Do not call Hooks inside conditions or loops.
-* 🔴 Do not call Hooks after a conditional `return` statement.
-* 🔴 Do not call Hooks in event handlers.
-* 🔴 Do not call Hooks in class components.
-* 🔴 Do not call Hooks inside functions passed to `useMemo`, `useReducer`, or `useEffect`.
+🔴 조건문 또는 루프 내에서 Hooks를 호출하지 마세요.
+🔴 조건부 `return` 문 이후에 Hooks를 호출하지 마세요.
+🔴 이벤트 핸들러에서 Hooks를 호출하지 마세요.
+🔴 클래스형 컴포넌트에서 Hooks를 호출하지 마세요.
+🔴 `useMemo`, `useReducer`, 또는 `useEffect`에 전달되는 함수 내에서 Hooks를 호출하지 마세요.
 
-If you break these rules, you might see this error.
+이러한 규칙을 어긴다면 이 오류를 볼 수 있습니다.
 
 ```js{3-4,11-12,20-21}
 function Bad({ cond }) {
   if (cond) {
-    // 🔴 Bad: inside a condition (to fix, move it outside!)
+    // 🔴 잘못된 예: 조건문 내부 (해결하기 위해서는 밖으로 옮겨주세요!)
     const theme = useContext(ThemeContext);
   }
   // ...
@@ -62,7 +62,7 @@ function Bad({ cond }) {
 
 function Bad() {
   for (let i = 0; i < 10; i++) {
-    // 🔴 Bad: inside a loop (to fix, move it outside!)
+    // 🔴 잘못된 예: 루프 내부 (해결하기 위해서는 밖으로 옮겨주세요!)
     const theme = useContext(ThemeContext);
   }
   // ...
@@ -72,14 +72,14 @@ function Bad({ cond }) {
   if (cond) {
     return;
   }
-  // 🔴 Bad: after a conditional return (to fix, move it before the return!)
+  // 🔴 잘못된 예: 조건부 반환 이후 (해결하기 위해서는 return문 보다 전으로 옮겨주세요!)
   const theme = useContext(ThemeContext);
   // ...
 }
 
 function Bad() {
   function handleClick() {
-    // 🔴 Bad: inside an event handler (to fix, move it outside!)
+    // 🔴 잘못된 예: 이벤트 핸들러 내부 (해결하기 위해서는 밖으로 옮겨주세요!)
     const theme = useContext(ThemeContext);
   }
   // ...
@@ -87,7 +87,7 @@ function Bad() {
 
 function Bad() {
   const style = useMemo(() => {
-    // 🔴 Bad: inside useMemo (to fix, move it outside!)
+    // 🔴 잘못된 예: useMemo 내부 (해결하기 위해서는 밖으로 옮겨주세요!)
     const theme = useContext(ThemeContext);
     return createStyle(theme);
   });
@@ -96,32 +96,32 @@ function Bad() {
 
 class Bad extends React.Component {
   render() {
-    // 🔴 Bad: inside a class component (to fix, write a function component instead of a class!)
+    // 🔴 잘못된 예: 클래스 컴포넌트 내부 (해결하기 위해서는 클래스형 대신 함수형 컴포넌트를 작성해주세요!)
     useEffect(() => {})
     // ...
   }
 }
 ```
 
-You can use the [`eslint-plugin-react-hooks` plugin](https://www.npmjs.com/package/eslint-plugin-react-hooks) to catch these mistakes.
+이러한 실수를 잡기 위해 [eslint-plugin-react-hooks 플러그인](https://www.npmjs.com/package/eslint-plugin-react-hooks)을 사용할 수 있습니다.
 
 <Note>
 
-[Custom Hooks](/learn/reusing-logic-with-custom-hooks) *may* call other Hooks (that's their whole purpose). This works because custom Hooks are also supposed to only be called while a function component is rendering.
+[사용자 정의 Hook](/learn/reusing-logic-with-custom-hooks)은 다른 Hooks를 호출할 수 *있습니다* (그것이 사용자 정의 Hook의 목적이기 때문입니다). 이는 사용자 정의 Hook도 함수형 컴포넌트가 렌더링되는 동안에만 호출되기 때문에 가능합니다.
 
 </Note>
 
-## Mismatching Versions of React and React DOM {/*mismatching-versions-of-react-and-react-dom*/}
+## React와 React DOM 버전의 불일치 {/*mismatching-versions-of-react-and-react-dom*/}
 
-You might be using a version of `react-dom` (< 16.8.0) or `react-native` (< 0.59) that doesn't yet support Hooks. You can run `npm ls react-dom` or `npm ls react-native` in your application folder to check which version you're using. If you find more than one of them, this might also create problems (more on that below).
+`react-dom` (< 16.8.0)이나 `react-native` (< 0.59)의 버전이 Hooks를 아직 지원하지 않을 수 있습니다. 애플리케이션 폴더에서 `npm ls react-dom` 또는 `npm ls react-native`을 실행하여 사용 중인 버전을 확인할 수 있습니다. 여러 개의 버전이 발견된 경우에도, 문제를 일으킬 수 있습니다(아래에서 더 자세히 설명합니다).
 
-## Duplicate React {/*duplicate-react*/}
+## 중복된 React {/*duplicate-react*/}
 
-In order for Hooks to work, the `react` import from your application code needs to resolve to the same module as the `react` import from inside the `react-dom` package.
+Hooks가 작동하려면 애플리케이션 코드에서 가져온 `react`의 import가 react-dom 패키지 내부에서 가져온 `react` import와 동일한 모듈을 가져와야 합니다.
 
-If these `react` imports resolve to two different exports objects, you will see this warning. This may happen if you **accidentally end up with two copies** of the `react` package.
+이러한 `react` import가 두 개의 다른 exports 객체를 가져온다면, 이 경고가 표시됩니다. 이는 실수로 **두 개의 `react` 패키지 사본이 생긴 경우**에 발생할 수 있습니다.
 
-If you use Node for package management, you can run this check in your project folder:
+패키지 관리를 위해 Node를 사용하는 경우 프로젝트 폴더에서 다음을 실행하여 이를 확인할 수 있습니다:
 
 <TerminalBlock>
 
@@ -129,30 +129,30 @@ npm ls react
 
 </TerminalBlock>
 
-If you see more than one React, you'll need to figure out why this happens and fix your dependency tree. For example, maybe a library you're using incorrectly specifies `react` as a dependency (rather than a peer dependency). Until that library is fixed, [Yarn resolutions](https://yarnpkg.com/lang/en/docs/selective-version-resolutions/) is one possible workaround.
+만약 두 개 이상의 React가 보일 경우, 이러한 상황이 발생한 이유를 찾고 의존성 트리를 수정해야 합니다. 예를 들어, 사용 중인 라이브러리가 `react`를 피어 종속성(peer dependency)이 아닌 종속성(dependency)으로 잘못 지정한 경우입니다. 해당 라이브러리가 수정되기 전까지는 [Yarn resolutions](https://yarnpkg.com/lang/en/docs/selective-version-resolutions/)이 가능한 해결책입니다.
 
-You can also try to debug this problem by adding some logs and restarting your development server:
+또한 몇 가지 로그를 추가하고 개발 서버를 다시 시작하여 이 문제를 디버깅해 볼 수도 있습니다:
 
 ```js
-// Add this in node_modules/react-dom/index.js
+// node_modules/react-dom/index.js에 추가
 window.React1 = require('react');
 
-// Add this in your component file
+// 컴포넌트 파일에 추가
 require('react-dom');
 window.React2 = require('react');
 console.log(window.React1 === window.React2);
 ```
 
-If it prints `false` then you might have two Reacts and need to figure out why that happened. [This issue](https://github.com/facebook/react/issues/13991) includes some common reasons encountered by the community.
+만약 `false`가 출력된다면 두 개의 React가 있을 수 있으며, 이러한 상황이 발생한 이유를 찾아야 합니다. [이 이슈](https://github.com/facebook/react/issues/13991)는 커뮤니티에서 발견한 일반적인 원인에 대해 설명하고 있습니다.
 
-This problem can also come up when you use `npm link` or an equivalent. In that case, your bundler might "see" two Reacts — one in application folder and one in your library folder. Assuming `myapp` and `mylib` are sibling folders, one possible fix is to run `npm link ../myapp/node_modules/react` from `mylib`. This should make the library use the application's React copy.
+이 문제는 `npm link` 또는 유사한 기능을 사용할 때에도 발생할 수 있습니다. 이 경우 번들러는 2개의 React - 애플리케이션 폴더와 라이브러리 폴더에서 각각 하나씩을 "보게" 될 수 있습니다. `myapp`과 `mylib`이 형제 폴더라고 가정하면, `mylib`에서 `npm link ../myapp/node_modules/react`를 실행하여 라이브러리가 애플리케이션의 React 복사본을 사용하도록 할 수 있습니다.
 
 <Note>
 
-In general, React supports using multiple independent copies on one page (for example, if an app and a third-party widget both use it). It only breaks if `require('react')` resolves differently between the component and the `react-dom` copy it was rendered with.
+일반적으로 React는 한 페이지에서 여러 개의 독립적인 복사본을 사용할 수 있습니다 (예를 들어 앱과 타사 위젯이 모두 사용하는 경우). 문제는 컴포넌트와 그것과 함께 렌더링된 `react-dom` 복사본에서 `require('react')`가 다르게 처리된 경우에만 발생합니다.
 
 </Note>
 
-## Other Causes {/*other-causes*/}
+## 기타 원인 {/*other-causes*/}
 
-If none of this worked, please comment in [this issue](https://github.com/facebook/react/issues/13991) and we'll try to help. Try to create a small reproducing example — you might discover the problem as you're doing it.
+만약 이 모든 방법이 도움이 되지 않는다면, [이 이슈](https://github.com/facebook/react/issues/13991)에 의견을 남기고 도움을 요청하세요. 작은 재현 가능한 예제를 만들어보면 문제를 발견할 수 있을 수도 있습니다.
diff --git a/src/content/warnings/special-props.md b/src/content/warnings/special-props.md
index 1646b531a..ac82c9c38 100644
--- a/src/content/warnings/special-props.md
+++ b/src/content/warnings/special-props.md
@@ -1,7 +1,7 @@
 ---
-title: Special Props Warning
+title: 특별한 Props 경고
 ---
 
-Most props on a JSX element are passed on to the component, however, there are two special props (`ref` and `key`) which are used by React, and are thus not forwarded to the component.
+JSX 요소의 대부분의 props는 컴포넌트로 전달됩니다. 그러나 두 가지 특별한 props(`ref`와 `key`)는 React에서 사용되므로 컴포넌트로 전달되지 않습니다.
 
-For instance, you can't read `props.key` from a component. If you need to access the same value within the child component, you should pass it as a different prop (ex: `<ListItemWrapper key={result.id} id={result.id} />` and read `props.id`). While this may seem redundant, it's important to separate app logic from hints to React.
+예를 들어, 컴포넌트에서 `props.key`를 읽을 수는 없습니다. 자식 컴포넌트 내에서 동일한 값을 액세스해야 하는 경우 다른 prop으로 전달해야 합니다. (예:`<ListItemWrapper key={result.id} id={result.id} />`와 같이 전달하고 `props.id`를 읽습니다.). 이는 불필요한 중복처럼 보일 수 있지만, 앱 로직을 React의 힌트와 분리하는 것이 중요합니다.
diff --git a/src/content/warnings/unknown-prop.md b/src/content/warnings/unknown-prop.md
index 80bcdb142..f4e1b87bb 100644
--- a/src/content/warnings/unknown-prop.md
+++ b/src/content/warnings/unknown-prop.md
@@ -1,38 +1,38 @@
 ---
-title: Unknown Prop Warning
+title: 알 수 없는 Prop 경고
 ---
 
-The unknown-prop warning will fire if you attempt to render a DOM element with a prop that is not recognized by React as a legal DOM attribute/property. You should ensure that your DOM elements do not have spurious props floating around.
+알 수 없는 Prop 경고는 React가 유효한 DOM 속성/프로퍼티로 인식하지 못하는 속성을 가진 DOM 요소를 렌더링하려고 할 때 발생합니다. DOM 요소에 불필요한 속성이 존재하지 않도록 확인해야 합니다.
 
-There are a couple of likely reasons this warning could be appearing:
+이 경고가 나타나는 가능한 이유는 다음과 같습니다:
 
-1. Are you using `{...props}` or `cloneElement(element, props)`? When copying props to a child component, you should ensure that you are not accidentally forwarding props that were intended only for the parent component. See common fixes for this problem below.
+1. `{...props}` 또는 `cloneElement(element, props)`를 사용하고 있습니까? props를 자식 컴포넌트로 복사할 때, 부모 컴포넌트에만 해당하는 속성이 실수로 자식 컴포넌트로 전달되지 않도록 확인해야 합니다. 이 문제에 대한 보통의 해결 방법은 아래에서 설명합니다.
 
-2. You are using a non-standard DOM attribute on a native DOM node, perhaps to represent custom data. If you are trying to attach custom data to a standard DOM element, consider using a custom data attribute as described [on MDN](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes).
+2. 네이티브 DOM 노드에서 비표준 DOM 속성을 사용하고 있을 수 있습니다. 표준 DOM 요소에 사용자 정의 데이터를 전달하려면, [MDN에서](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes) 설명하는 사용자 정의 데이터 속성을 사용하는 것을 고려해 보세요.
 
-3. React does not yet recognize the attribute you specified. This will likely be fixed in a future version of React. React will allow you to pass it without a warning if you write the attribute name lowercase.
+3. React가 지정한 속성을 아직 인식하지 못할 수 있습니다. 이는 나중에 나올 React 버전에서 수정될 가능성이 있습니다. 만약 속성 이름을 소문자로 작성하면, React는 경고 없이 해당 속성을 전달할 수 있습니다.
 
-4. You are using a React component without an upper case, for example `<myButton />`. React interprets it as a DOM tag because React JSX transform uses the upper vs. lower case convention to distinguish between user-defined components and DOM tags. For your own React components, use PascalCase. For example, write `<MyButton />` instead of `<myButton />`.
+4. `<myButton />`과같이 대문자 없이 React 컴포넌트를 사용하고 있을 수 있습니다. React는 대문자와 소문자의 컨벤션을 사용하여 사용자 정의 컴포넌트와 DOM 태그를 구분합니다. 자신의 React 컴포넌트를 작성할 때는 PascalCase를 사용해야 합니다. 예를 들어 `<myButton />` 대신 `<MyButton />`과같이 작성하세요.
 
 ---
 
-If you get this warning because you pass props like `{...props}`, your parent component needs to "consume" any prop that is intended for the parent component and not intended for the child component. Example:
+만약 `{...props}`와 같은 방식으로 props를 전달하여 이 경고가 나타난다면, 부모 컴포넌트는 자식 컴포넌트에는 해당하지 않고 부모 컴포넌트에만 해당하는 속성을 "소비(consume)"해야 합니다. 예시:
 
-**Bad:** Unexpected `layout` prop is forwarded to the `div` tag.
+**나쁜 예:** 예기치 않은 `layout` prop이 `div` 태그로 전달됩니다.
 
 ```js
 function MyDiv(props) {
   if (props.layout === 'horizontal') {
-    // BAD! Because you know for sure "layout" is not a prop that <div> understands.
+    // 나쁜 예! "layout"이 <div> tag가 이해하는 prop이 아닌 것을 알고 있기 때문입니다.
     return <div {...props} style={getHorizontalStyle()} />
   } else {
-    // BAD! Because you know for sure "layout" is not a prop that <div> understands.
+    // 나쁜 예! "layout"이 <div> tag가 이해하는 prop이 아닌 것을 알고 있기 때문입니다.
     return <div {...props} style={getVerticalStyle()} />
   }
 }
 ```
 
-**Good:** The spread syntax can be used to pull variables off props, and put the remaining props into a variable.
+**좋은 예:** 전개 구문을 사용하여 변수를 props에서 추출하고, 남은 props를 변수에 할당합니다.
 
 ```js
 function MyDiv(props) {
@@ -45,7 +45,7 @@ function MyDiv(props) {
 }
 ```
 
-**Good:** You can also assign the props to a new object and delete the keys that you're using from the new object. Be sure not to delete the props from the original `this.props` object, since that object should be considered immutable.
+**좋은 예:** 속성을 새로운 객체에 할당하고, 사용한 키를 객체에서 삭제할 수도 있습니다. 원본 `this.props` 객체의 props를 삭제하지 않도록 주의해야 합니다. 해당 객체는 변경 불가능한 것으로 간주되어야 합니다.
 
 ```js
 function MyDiv(props) {