홈앤서비스 SK BROADBAND

0장 준비하기

0.1 HTML 살펴보기
0.2 CSS란 무엇인가?
0.3 자바스크립트
0.4 개발 환경 설정하기
0.5 마치며

1장 리액트 소개

1.1 리액트는 무엇인가?
1.2 리액트의 장점
1.3 리액트의 단점
1.4 마치며

2장 리액트 시작하기

2.1 HTML만으로 간단한 웹사이트 만들기
2.2 CSS를 사용하여 웹사이트 스타일링하기
2.3 웹사이트에 React.js 추가하기
2.4 create-react-app
2.5 마치며

3장 JSX 소개

3.1 JSX란?
3.2 JSX의 역할
3.3 JSX의 장점
3.4 JSX 사용법
3.5 JSX 코드 작성해 보기
3.6 마치며

4장 엘리먼트 렌더링

4.1 엘리먼트에 대해 알아보기
4.2 엘리먼트 렌더링하기
4.3 렌더링된 엘리먼트 업데이트하기
4.4 시계 만들기
4.5 마치며

5장 컴포넌트와 Props

5.1 컴포넌트에 대해 알아보기
5.2 Props에 대해 알아보기
5.3 컴포넌트 만들기
5.4 컴포넌트 합성
5.5 컴포넌트 추출
5.6 댓글 컴포넌트 만들기
5.7 마치며

6장 State와 생명주기

6.1 State
6.2 생명주기에 대해 알아보기
6.3 State와 생명주기 함수 사용하기
6.4 마치며

7장 훅

7.1 훅이란 무엇인가?
7.2 useState
7.3 useEffect
7.4 useMemo
7.5 useCallback
7.6 useRef
7.7 훅의 규칙
7.8 나만의 훅 만들기
7.9 훅을 사용한 컴포넌트 개발
7.10 마치며

8장 이벤트 핸들링

8.1 이벤트 처리하기
8.2 Arguments 전달하기
8.3 클릭 이벤트 처리하기
8.4 마치며

9장 조건부 렌더링

9.1 조건부 렌더링이란?
9.2 엘리먼트 변수
9.3 인라인 조건
9.4 컴포넌트 렌더링 막기
9.5 로그인 여부를 나타내는 툴바 만들기
9.6 마치며

10장 리스트와 키

10.1 리스트와 키란 무엇인가?
10.2 여러 개의 컴포넌트 렌더링하기
10.3 기본적인 리스트 컴포넌트
10.4 리스트의 키에 대해 알아보기
10.5 출석부 출력하기
10.6 마치며

11장 폼

11.1 폼이란 무엇인가?
11.2 제어 컴포넌트
11.3 textarea 태그
11.4 select 태그
11.5 File input 태그
11.6 여러 개의 입력 다루기
11.7 Input Null Value
11.8 사용자 정보 입력받기
11.9 마치며

12장 State 끌어올리기

12.1 Shared State
12.2 하위 컴포넌트에서 State 공유하기
12.3 섭씨온도와 화씨온도 표시하기
12.4 마치며

13장 합성 vs. 상속

13.1 합성에 대해 알아보기
13.2 상속에 대해 알아보기
13.3 Card 컴포넌트 만들기
13.4 마치며

14장 컨텍스트

14.1 컨텍스트란 무엇인가?
14.2 언제 컨텍스트를 사용해야 할까?
14.3 컨텍스트를 사용하기 전에 고려할 점
14.4 컨텍스트 API
14.5 여러 개의 컨텍스트 사용하기
14.6 useContext
14.7 컨텍스트를 사용하여 테마 변경 기능 만들기
14.8 마치며

15장 스타일링

15.1 CSS
15.2 styled-components
15.3 styled-components를 사용하여 스타일링해 보기
15.4 마치며

16장 미니 프로젝트_미니 블로그 만들기

16.1 미니 블로그 기획하기
16.2 프로젝트 생성하기
16.3 필요한 패키지 설치하기
16.4 주요 컴포넌트 구성하기
16.5 폴더 구성하기
16.6 UI 컴포넌트 구현하기
16.7 List 컴포넌트 구현하기

부록 리액트 18 소개
A.1 자동 배칭
A.2 트랜지션
A.3 서스펜스
A.4 클라이언트와 서버 렌더링 API 업데이트
A.5 새로운 Strict 모드 작동 방식
A.6 새로 추가된 훅들