처음 만난 리액트
1.준비하기
리액트를 공부하기 전 웹프로그래밍의 기초인 HTML, SPA, CSS, JS (자료형, 연산자, 함수)에 대해 알아보자
2.리액트 소개
리액트는 무엇인가? 리액트 장단점에 대해 알아보자!
3.리액트 시작하기
직접 리액트 연동하기 및 create-react-app 실습 진행
4.[React] JSX
JSX의 정의와 역할, 장점 및 사용법, 실습까지 알아보자!
5.[React] Rendering Elements
Elements의 정의와 생김새, Elements의 특징 및 렌더링하는 과정을 학습하여, 시계를 만드는 실습을 통해 Rendering Elements에 대해 알아보자!
6.[React] Components and Props
Components와 Props의 정의, Props의 특징 및 사용법, Component 만들기 및 렌더링, Component합성과 추출, (실습) 댓글 컴포넌트 만들기를 하면서 Components와 Props에 대해 알아보자!
7.[React] State and Lifecycle
State와 Lifecycle의 정의 및 state를 사용하고, Lifecycle이 어떻게 작동되는지 실습을 통해 알아보자
8.[React] Hooks
Hooks의 개념과 useState, useEffect, useMemo, useCallback, useRef과 같이 대표적인 Hook을 학습하고, Hook의 규칙과 Custom Hook을 만들어 실습을 통해 Hooks을 사용해보자!
9.[React] Handling Events
Event의 정의 및 Event 다루기, 클릭 이벤트 처리하기의 실습을 통해 Handling Event에 대해 알아보자!
10.[React] Conditional Rendering
Conditional Rendering의 정의와 Inline Conditions에 학습하고 로그인 여부를 나타내는 툴바를 만들어보면서 Conditional Rendering에 대해 알아보자!
11.[React] List and Keys
List와 Key, 여러 개의 Component 렌더링 하기, 실습으로 출석부 출력하기까지 하며 List와 Key에 대해 알아보자!
12.[React] Forms
Form과 Controlled Component, 다양한 Forms를 학습하고 사용자 정보 입력 받기 실습을 통해 Forms를 알아보자!
13.[React] Lifting State Up
Shared State에 대해 학습하고 , 하위 컴포넌트에서 State 공유하는 법을 알고, 섭씨 온도와 화씨 온도 표시하는 실습을 통해 Lifting State Up에 대해 알아보자!
14.[React] Composition vs Inheritance
Composition 방법과 Inheritance에 대해 알아보며, Card 컴포넌트를 만들며 실습을 통해 Composition에 대해 알아보자!
15.[React] Context
Context란 무엇인지, Context API에 대해 학습하고 Context를 사용하여 테마 변경 기능을 만드는 실습을 통해 Context에 대해 알아보자!
16.[React] Styling
CSS와 selector 종류에 대해 알아보고, 레이아웃과 관련된 CSS 속성, Font와 관련된 CSS 속성, 기타 많이 사용하는 CSS 속성, styled-components에 대해 학습 후 styled-components를 사용하여 스타일링 실습을 학습해보자!
17.[React] Mini Project (시리즈 끝)
미니 블로그 기획, 프로젝트 생성 및 필요한 패키지 설치, 주요 컴포넌트 및 폴도 구성, UI 컴포넌트 및 List 컴포넌트 구현, 가짜 데이터 생성, Page 컴포넌트 구현 및 각 페이지별 경로 구성, App.js 파일 수정, 애플리케이션 실행, Prodction빌드