sidebarLearn.json

{
  "title": "React 학습하기",
  "path": "/learn",
  "routes": [
    {
      "hasSectionHeader": true,
      "sectionHeader": "시작하기"
    },
    {
      "title": "빠르게 시작하기",
      "path": "/learn",
      "routes": [
        {
          "title": "자습서: 틱택토 게임",
          "path": "/learn/tutorial-tic-tac-toe"
        },
        {
          "title": "React로 사고하기",
          "path": "/learn/thinking-in-react"
        }
      ]
    },
    {
      "title": "설치하기",
      "path": "/learn/installation",
      "routes": [
        {
          "title": "새로운 React 앱 만들기",
          "path": "/learn/creating-a-react-app"
        },
        {
          "title": "처음부터 React 앱 만들기",
          "path": "/learn/build-a-react-app-from-scratch"
        },
        {
          "title": "기존 프로젝트에 React 추가하기",
          "path": "/learn/add-react-to-an-existing-project"
        }
      ]
    },
    {
      "title": "설정하기",
      "path": "/learn/setup",
      "routes": [
        {
          "title": "에디터 설정하기",
          "path": "/learn/editor-setup"
        },
        {
          "title": "TypeScript 사용하기",
          "path": "/learn/typescript"
        },
        {
          "title": "React 개발자 도구",
          "path": "/learn/react-developer-tools"
        }
      ]
    },
    {
      "title": "React 컴파일러",
      "path": "/learn/react-compiler",
      "canary": true,
      "routes": [
        {
          "title": "소개",
          "path": "/learn/react-compiler/introduction"
        },
        {
          "title": "설치",
          "path": "/learn/react-compiler/installation"
        },
        {
          "title": "점진적 도입",
          "path": "/learn/react-compiler/incremental-adoption"
        },
        {
          "title": "디버깅 및 문제 해결",
          "path": "/learn/react-compiler/debugging"
        }
      ]
    },
    {
      "hasSectionHeader": true,
      "sectionHeader": "React 학습하기"
    },
    {
      "title": "UI 표현하기",
      "tags": [],
      "path": "/learn/describing-the-ui",
      "routes": [
        {
          "title": "첫 번째 컴포넌트",
          "path": "/learn/your-first-component"
        },
        {
          "title": "컴포넌트 Import 및 Export하기",
          "path": "/learn/importing-and-exporting-components"
        },
        {
          "title": "JSX로 마크업 작성하기",
          "path": "/learn/writing-markup-with-jsx"
        },
        {
          "title": "중괄호가 있는 JSX에서 자바스크립트 사용하기",
          "path": "/learn/javascript-in-jsx-with-curly-braces"
        },
        {
          "title": "컴포넌트에 Props 전달하기",
          "path": "/learn/passing-props-to-a-component"
        },
        {
          "title": "조건부 렌더링",
          "path": "/learn/conditional-rendering"
        },
        {
          "title": "리스트 렌더링",
          "path": "/learn/rendering-lists"
        },
        {
          "title": "컴포넌트를 순수하게 유지하기",
          "path": "/learn/keeping-components-pure"
        },
        {
          "title": "트리로서의 UI",
          "path": "/learn/understanding-your-ui-as-a-tree"
        }
      ]
    },
    {
      "title": "상호작용성 더하기",
      "path": "/learn/adding-interactivity",
      "tags": [],
      "routes": [
        {
          "title": "이벤트에 응답하기",
          "path": "/learn/responding-to-events"
        },
        {
          "title": "State: 컴포넌트의 기억 저장소",
          "path": "/learn/state-a-components-memory"
        },
        {
          "title": "렌더링 그리고 커밋",
          "path": "/learn/render-and-commit"
        },
        {
          "title": "스냅샷으로서의 State",
          "path": "/learn/state-as-a-snapshot"
        },
        {
          "title": "State 업데이트 큐",
          "path": "/learn/queueing-a-series-of-state-updates"
        },
        {
          "title": "객체 State 업데이트하기",
          "path": "/learn/updating-objects-in-state"
        },
        {
          "title": "배열 State 업데이트하기",
          "path": "/learn/updating-arrays-in-state"
        }
      ]
    },
    {
      "title": "State 관리하기",
      "path": "/learn/managing-state",
      "tags": ["intermediate"],
      "routes": [
        {
          "title": "State를 사용해 Input 다루기",
          "path": "/learn/reacting-to-input-with-state"
        },
        {
          "title": "State 구조 선택하기",
          "path": "/learn/choosing-the-state-structure"
        },
        {
          "title": "컴포넌트 간 State 공유하기",
          "path": "/learn/sharing-state-between-components"
        },
        {
          "title": "State를 보존하고 초기화하기",
          "path": "/learn/preserving-and-resetting-state"
        },
        {
          "title": "State 로직을 Reducer로 작성하기",
          "path": "/learn/extracting-state-logic-into-a-reducer"
        },
        {
          "title": "Context를 사용해 데이터를 깊게 전달하기",
          "path": "/learn/passing-data-deeply-with-context"
        },
        {
          "title": "Reducer와 Context로 앱 확장하기",
          "path": "/learn/scaling-up-with-reducer-and-context"
        }
      ]
    },
    {
      "title": "탈출구",
      "path": "/learn/escape-hatches",
      "tags": ["advanced"],
      "routes": [
        {
          "title": "Ref로 값 참조하기",
          "path": "/learn/referencing-values-with-refs"
        },
        {
          "title": "Ref로 DOM 조작하기",
          "path": "/learn/manipulating-the-dom-with-refs"
        },
        {
          "title": "Effect로 동기화하기",
          "path": "/learn/synchronizing-with-effects"
        },
        {
          "title": "Effect가 필요하지 않은 경우",
          "path": "/learn/you-might-not-need-an-effect"
        },
        {
          "title": "React Effect의 생명주기",
          "path": "/learn/lifecycle-of-reactive-effects"
        },
        {
          "title": "Effect에서 이벤트 분리하기",
          "path": "/learn/separating-events-from-effects"
        },
        {
          "title": "Effect의 의존성 제거하기",
          "path": "/learn/removing-effect-dependencies"
        },
        {
          "title": "커스텀 Hook으로 로직 재사용하기",
          "path": "/learn/reusing-logic-with-custom-hooks"
        }
      ]
    }
  ]
}