Merge branch 'master' into translate-tutorial-nav

Author: hg-pyun

content/docs/context.md

@@ -1,85 +1,85 @@
-- title: Installation
+- title: 설치
   items:
     - id: getting-started
-      title: Getting Started
+      title: 시작하기
     - id: add-react-to-a-website
-      title: Add React to a Website
+      title: 웹 사이트에 React 추가하기
     - id: create-a-new-react-app
-      title: Create a New React App
+      title: 새로운 React 앱 만들기
     - id: cdn-links
-      title: CDN Links
-- title: Main Concepts
+      title: CDN 링크
+- title: 주요 개념
   isOrdered: true
   items:
     - id: hello-world
       title: Hello World
     - id: introducing-jsx
-      title: Introducing JSX
+      title: JSX 소개
     - id: rendering-elements
-      title: Rendering Elements
+      title: 엘리먼트 렌더링
     - id: components-and-props
-      title: Components and Props
+      title: Component와 Props
     - id: state-and-lifecycle
-      title: State and Lifecycle
+      title: State와 생명주기
     - id: handling-events
-      title: Handling Events
+      title: 이벤트 처리하기
     - id: conditional-rendering
-      title: Conditional Rendering
+      title: 조건부 렌더링
     - id: lists-and-keys
-      title: Lists and Keys
+      title: 리스트와 Key
     - id: forms
-      title: Forms
+      title: 폼
     - id: lifting-state-up
-      title: Lifting State Up
+      title: State 올리기
     - id: composition-vs-inheritance
-      title: Composition vs Inheritance
+      title: 합성 vs 상속
     - id: thinking-in-react
-      title: Thinking In React
-- title: Advanced Guides
+      title: React로 생각하기
+- title: 고급 안내서
   items:
     - id: accessibility
-      title: Accessibility
+      title: 접근성
     - id: code-splitting
-      title: Code-Splitting
+      title: 코드 분할
     - id: context
       title: Context
     - id: error-boundaries
-      title: Error Boundaries
+      title: Error Boundary
     - id: forwarding-refs
-      title: Forwarding Refs
+      title: Ref 전달하기
     - id: fragments
-      title: Fragments
+      title: Fragment
     - id: higher-order-components
-      title: Higher-Order Components
+      title: 고차 컴포넌트
     - id: integrating-with-other-libraries
-      title: Integrating with Other Libraries
+      title: 다른 라이브러리와 통합하기
     - id: jsx-in-depth
-      title: JSX In Depth
+      title: JSX 이해하기
     - id: optimizing-performance
-      title: Optimizing Performance
+      title: 성능 최적화
     - id: portals
-      title: Portals
+      title: Portal
     - id: react-without-es6
-      title: React Without ES6
+      title: ES6 없이 사용하는 React
     - id: react-without-jsx
-      title: React Without JSX
+      title: JSX 없이 사용하는 React
     - id: reconciliation
-      title: Reconciliation
+      title: 재조정 (Reconciliation)
     - id: refs-and-the-dom
-      title: Refs and the DOM
+      title: Ref와 DOM
     - id: render-props
       title: Render Props
     - id: static-type-checking
-      title: Static Type Checking
+      title: 정적 타입 검사
     - id: strict-mode
       title: Strict Mode
     - id: typechecking-with-proptypes
-      title: Typechecking With PropTypes
+      title: PropTypes를 사용한 타입 검사
     - id: uncontrolled-components
-      title: Uncontrolled Components
+      title: 비제어 컴포넌트
     - id: web-components
-      title: Web Components
-- title: API Reference
+      title: 웹 컴포넌트
+- title: API 참고서
   items:
     - id: react-api
       title: React
@@ -91,63 +91,63 @@
     - id: react-dom-server
       title: ReactDOMServer
     - id: dom-elements
-      title: DOM Elements
+      title: DOM 엘리먼트
     - id: events
-      title: SyntheticEvent
+      title: 합성 이벤트
     - id: test-utils
-      title: Test Utilities
+      title: 테스트 유틸리티
     - id: shallow-renderer
-      title: Shallow Renderer
+      title: 얕은 렌더러
     - id: test-renderer
-      title: Test Renderer
+      title: 테스트 렌더러
     - id: javascript-environment-requirements
-      title: JS Environment Requirements
+      title: JS 환경 요구사항
     - id: glossary
-      title: Glossary
-- title: Hooks (New)
+      title: React 기술 용어 모음
+- title: Hook (New)
   isOrdered: true
   items:
       - id: hooks-intro
-        title: Introducing Hooks
+        title: Hook 소개
       - id: hooks-overview
         title: Hook 개요
       - id: hooks-state
-        title: Using the State Hook
+        title: State Hook 사용하기
       - id: hooks-effect
-        title: Using the Effect Hook
+        title: Effect Hook 사용하기
       - id: hooks-rules
-        title: Hook의 규칙
+        title: Hook 규칙
       - id: hooks-custom
-        title: Building Your Own Hooks
+        title: 자신만의 Hook 만들기
       - id: hooks-reference
-        title: Hooks API Reference
+        title: Hook API 참고서
       - id: hooks-faq
-        title: Hooks FAQ
-- title: Contributing
+        title: Hook 자주 묻는 질문
+- title: 기여
   items:
   - id: how-to-contribute
-    title: How to Contribute
+    title: 기여하는 방법
   - id: codebase-overview
-    title: Codebase Overview
+    title: 코드 구조 개요
   - id: implementation-notes
-    title: Implementation Notes
+    title: 구현 참고사항
   - id: design-principles
-    title: Design Principles
-- title: FAQ
+    title: 설계 원칙
+- title: 자주 묻는 질문
   items:
     - id: faq-ajax
-      title: AJAX and APIs
+      title: AJAX와 API
     - id: faq-build
-      title: Babel, JSX, and Build Steps
+      title: Babel, JSX와 Build 과정
     - id: faq-functions
-      title: Passing Functions to Components
+      title: 컴포넌트에 함수 전달하기
     - id: faq-state
-      title: Component State
+      title: 컴포넌트 State
     - id: faq-styling
-      title: Styling and CSS
+      title: 스타일링과 CSS
     - id: faq-structure
-      title: File Structure
+      title: 파일 구조
     - id: faq-versioning
-      title: Versioning Policy
+      title: 버전 정책
     - id: faq-internals
-      title: Virtual DOM and Internals
+      title: 가상 DOM과 구현 세부사항

content/docs/nav.yml

@@ -6,10 +6,10 @@ class App extends React.Component {
 
 function Toolbar(props) {
   // highlight-range{1-4,7}
-  // The Toolbar component must take an extra "theme" prop
-  // and pass it to the ThemedButton. This can become painful
-  // if every single button in the app needs to know the theme
-  // because it would have to be passed through all components.
+  // Toolbar 컴포넌트는 불필요한 테마 prop를 받아서
+  // ThemeButton에 전달해야 합니다.
+  // 앱 안의 모든 버튼이 테마를 알아야 한다면
+  // 이 정보를 일일이 넘기는 과정은 매우 곤혹스러울 수 있습니다.
   return (
     <div>
       <ThemedButton theme={props.theme} />

examples/context/motivation-problem.js

@@ -1,15 +1,15 @@
 // highlight-range{1-4}
-// Context lets us pass a value deep into the component tree
-// without explicitly threading it through every component.
-// Create a context for the current theme (with "light" as the default).
+// context를 사용하면 모든 컴포넌트를 일일이 통하지 않고도
+// 원하는 값을 컴포넌트 트리 깊숙한 곳까지 보낼 수 있습니다.
+// light를 기본값으로 하는 테마 context를 만들어 봅시다.
 const ThemeContext = React.createContext('light');
 
 class App extends React.Component {
   render() {
     // highlight-range{1-3,5}
-    // Use a Provider to pass the current theme to the tree below.
-    // Any component can read it, no matter how deep it is.
-    // In this example, we're passing "dark" as the current value.
+    // Provider를 이용해 하위 트리에 테마 값을 보내줍니다.
+    // 아무리 깊숙히 있어도, 모든 컴포넌트가 이 값을 읽을 수 있습니다.
+    // 아래 예시에서는 dark를 현재 선택된 테마 값으로 보내고 있습니다.
     return (
       <ThemeContext.Provider value="dark">
         <Toolbar />
@@ -18,9 +18,8 @@ class App extends React.Component {
   }
 }
 
-// highlight-range{1,2}
-// A component in the middle doesn't have to
-// pass the theme down explicitly anymore.
+// highlight-next-line
+// 이젠 중간에 있는 컴포넌트가 일일이 테마를 넘겨줄 필요가 없습니다.
 function Toolbar(props) {
   return (
     <div>
@@ -31,9 +30,9 @@ function Toolbar(props) {
 
 class ThemedButton extends React.Component {
   // highlight-range{1-3,6}
-  // Assign a contextType to read the current theme context.
-  // React will find the closest theme Provider above and use its value.
-  // In this example, the current theme is "dark".
+  // 현재 선택된 테마 값을 읽기 위해 contextType을 지정합니다.
+  // React는 가장 가까이 있는 테마 Provider를 찾아 그 값을 사용할 것입니다.
+  // 이 예시에서 현재 선택된 테마는 dark입니다.
   static contextType = ThemeContext;
   render() {
     return <Button theme={this.context} />;

examples/context/motivation-solution.js

@@ -1,7 +1,7 @@
-// Theme context, default to light theme
+// 기본값이 light인  ThemeContext
 const ThemeContext = React.createContext('light');
 
-// Signed-in user context
+// 로그인한 유저 정보를 담는 UserContext
 const UserContext = React.createContext({
   name: 'Guest',
 });
@@ -10,7 +10,7 @@ class App extends React.Component {
   render() {
     const {signedInUser, theme} = this.props;
 
-    // App component that provides initial context values
+    // context 초기값을 제공하는 App 컴포넌트
     // highlight-range{2-3,5-6}
     return (
       <ThemeContext.Provider value={theme}>
@@ -31,7 +31,7 @@ function Layout() {
   );
 }
 
-// A component may consume multiple contexts
+// 여러 context의 값을 받는 컴포넌트
 function Content() {
   // highlight-range{2-10}
   return (

examples/context/multiple-contexts.js

@@ -1,7 +1,7 @@
 import {ThemeContext, themes} from './theme-context';
 import ThemedButton from './themed-button';
 
-// An intermediate component that uses the ThemedButton
+// ThemedButton를 사용하는 중간에 있는 컴포넌트
 function Toolbar(props) {
   return (
     <ThemedButton onClick={props.changeTheme}>
@@ -28,10 +28,9 @@ class App extends React.Component {
   }
 
   render() {
-    //highlight-range{1-3}
-    // The ThemedButton button inside the ThemeProvider
-    // uses the theme from state while the one outside uses
-    // the default dark theme
+    //highlight-range{1-2}
+    // ThemeProvider 안에 있는 ThemedButton은 state로부터 theme 값을 읽지만
+    // Provider 밖에 있는 ThemedButton는 기본값인 dark를 사용합니다.
     //highlight-range{3-5,7}
     return (
       <Page>

examples/context/theme-detailed-app.js

@@ -11,5 +11,5 @@ export const themes = {
 
 // highlight-range{1-3}
 export const ThemeContext = React.createContext(
-  themes.dark // default value
+  themes.dark // 기본값
 );

examples/context/theme-detailed-theme-context.js

@@ -15,8 +15,8 @@ class App extends React.Component {
     };
 
     // highlight-range{1-2,5}
-    // State also contains the updater function so it will
-    // be passed down into the context provider
+    // state에 업데이트 메서드도 포함되어있으므로
+    // 이 또한 context Provider를 통해 전달될것입니다.
     this.state = {
       theme: themes.light,
       toggleTheme: this.toggleTheme,
@@ -25,7 +25,7 @@ class App extends React.Component {
 
   render() {
     // highlight-range{1,3}
-    // The entire state is passed to the provider
+    // Provider에 state 전체를 넘겨줍니다.
     return (
       <ThemeContext.Provider value={this.state}>
         <Content />

examples/context/updating-nested-context-app.js

@@ -1,5 +1,5 @@
-// Make sure the shape of the default value passed to
-// createContext matches the shape that the consumers expect!
+// createContext에 보내는 기본값의 모양을
+// 하위 컴포넌트가 받고 있는 매개변수 모양과 동일하게 만드는 것 잊지마세요!
 // highlight-range{2-3}
 export const ThemeContext = React.createContext({
   theme: themes.dark,

examples/context/updating-nested-context-context.js

@@ -2,8 +2,8 @@ import {ThemeContext} from './theme-context';
 
 function ThemeTogglerButton() {
   // highlight-range{1-2,5}
-  // The Theme Toggler Button receives not only the theme
-  // but also a toggleTheme function from the context
+  // ThemeTogglerButton는 context로부터
+  // theme 값과 함께 toggleTheme 매서드도 받고 있습니다.
   return (
     <ThemeContext.Consumer>
       {({theme, toggleTheme}) => (