# 리액트 강의

## 강의 목표

1. 리액트를 사용해서 내가 원하는 간단한 페이지는 고민 없이 만들 수 있다.
2. 앞으로 복잡한 리액트 앱을 개발하게 될 때, 이 강의를 통해서 더 어려운 내용의 학습을 쉽게 진행한다.
3. `생각하는 개발자`

## 강의대상

리액트를 잘 모르는 분. 프론트엔드 요새 많이 복잡해졌다는데 그래봤자 Jquery 비슷한 거 아니야? 라고 생각하시는 분. 리액트 기초에 대한 지식이 부족한 분.

새로운 프레임워크를 배워보고 싶은 분들

## 강의를 통해서 얻어갈 수 있는 것

리액트 기초 지식

리액트 뿐만 아닌 다른 컴포넌트 기반 프레임워크를 더욱 쉽게 배울 수 있는 개념 정립

## 목차

```
리액트를 시작하기 전에 먼저 할 일
ES6에 대한 학습
- Arrow function
- class
- spread syntax
```

* [ ] React 기초와 맛보기 
* [ ] [리액트를 시작하기 전에](https://ljh86029926.gitbook.io/coding-apple-react/before-start-class)
* [ ] [리액트가 뭐야 ?](https://ljh86029926.gitbook.io/coding-apple-react/1/what-is-react)
* [ ] [리액트를 왜 배우니 ?](https://ljh86029926.gitbook.io/coding-apple-react/1/why-learn-react)
* [ ] [CRA를 활용한 5분만에 리액트 클라이언트 앱 만들기](https://ljh86029926.gitbook.io/codingapple-react-class/create-reactapp-using-cra-5min)
* [ ] [CRA 리액트 프로젝트 환경설정](https://ljh86029926.gitbook.io/coding-apple-react/1/create-reactapp-using-cra-5min#undefined-1)
* [ ] [JSX 문법](https://ljh86029926.gitbook.io/coding-apple-react/1/1-jsx)
* [ ] [컴포넌트 생성해보기](https://ljh86029926.gitbook.io/coding-apple-react/1/component-of-react)
* [ ] [Props와 State에 대해 알아보기](https://ljh86029926.gitbook.io/coding-apple-react/1/props-and-state)
* [ ] [컴포넌트 생성 주기에 따른 LifeCycle API 알아보기](https://ljh86029926.gitbook.io/coding-apple-react/2/lifecycle-of-react-component)
* [ ] 전화번호부 만들기 (생성, 수정, 삭제, 검색) (시간이 된다면)<br>
* [ ] React 꾸미기
* [ ] [CRA에 sass, scss 주입 방법](https://ljh86029926.gitbook.io/coding-apple-react/2/scss-note#undefined-1)
* [ ] [Styled-component](https://ljh86029926.gitbook.io/coding-apple-react/2/scss-note#undefined-4)
* [ ] [리액트 메모장 만들기 (생성, 수정, 삭제, 검색)](https://ljh86029926.gitbook.io/coding-apple-react/2/scss-note#undefined)<br>
* [ ] React로 본격적인 웹앱 만들기
* [ ] [CSR은 SSR과 뭐가 다른거지 ?](https://ljh86029926.gitbook.io/coding-apple-react/3/route-prepare#undefined)
* [ ] [react-router-dom을 이용한 간단한 라우팅 학습](https://ljh86029926.gitbook.io/coding-apple-react/3/route-prepare#browerrouter-csr)
* [ ] [NavLink를 통한 특정 라우트 페이지 스타일 주입](https://ljh86029926.gitbook.io/coding-apple-react/3/route-actual#a-link)
* [ ] [history를 이용한 이전 페이지로 이동 실습해보기](https://ljh86029926.gitbook.io/coding-apple-react/3/history-go-and-goback)
* [ ] [라우팅을 통한 한국 전통 음식 소개 페이지 만들기](https://ljh86029926.gitbook.io/coding-apple-react/3/korea-food)
*

&#x20;  1\. [전체적인 음식 리스트](https://ljh86029926.gitbook.io/coding-apple-react/3/korea-food#undefined-3)
2\. [세부 음식 정보](https://ljh86029926.gitbook.io/coding-apple-react/3/korea-food#undefined-5)<br>

* [ ] API (Ajax) 사용을 통한 데이터 요청 및 핸들링과 State 효율적으로 관리하기
* [ ] Ajax & API (axios)
* [ ] API 요청 간단 실습해보기
* [ ] Unsplash API를 이용한 사진첩 만들기
* [ ] API 요청으로 추가 데이터 로드하기
* [ ] API 실패 시 에러 핸들링하기
* [ ] 데이터 상태 관리
* [ ] 리덕스를 이용한 상태 관리
*

&#x20;  1\. 왜 리덕스가 필요한가요?
2\. 리덕스를 사용해야할 상황 구분하기
3\. 리덕스를 사용한 간단한 투두리스트 실습<br>

* [ ] 번외
  * ESlint
  * Prettier
  * ESlint + Prettier 적용하기
  * Typescript와 함께 리액트 사용하기
  * Vscode 에디터 꿀팁


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ljh86029926.gitbook.io/coding-apple-react/master.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.