# 리액트 강의

## 강의 목표

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 에디터 꿀팁