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
기초적인 내용 위주로 빠르고 쉽게 만나는 리액트!
리액트는 오픈소스 자바스크립트 UI 라이브러리입니다. 최근 웹사이트(또는 웹 애플리케이션의 규모가 커짐에 따라 수많은 페이지를 만들어 관리하는 것은 매우 어렵습니다. 따라서 복잡한 웹사이트를 쉽고 빠르게 구현 및 관리할 수 있도록 도와주는 것이 리액트입니다. 이 책은 리액트의 주요 개념을 익히고 간단한 실습을 통해 실제 웹사이트에 리액트를 적용해 보며 학습할 수 있도록 구성되어 있습니다.
★ 이 책에서 배우는 내용
필요한 기초 지식 및 개발 환경
리액트 소개 및 준비
JSX
엘리먼트 렌더링
컴포넌트와 Props
state와 생명주기
훅
이벤트 핸들링
조건부 렌더링
리스트와 키
폼
State 끌어올리기
합성과 상속
컨텍스트
스타일링
미니 블로그 만들기
★ 이 책의 구성
0장은 리액트를 배우기 전에 알아야 할 기초 지식과 실습을 진행할 개발 환경 설정에 대해 설명합니다. 1~2장은 리액트의 기본 개념과 장단점에 대해 배우고 간단한 실습을 통해 리액트를 적용해 봅니다.
3장부터 14장까지는 리액트의 각 요소별 기능에 대해 설명합니다. 각 챕터의 전반부는 해당 챕터에서 배우고자 하는 리액트의 각 요소별 기본 개념을 설명합니다. 해당 챕터의 후반부에는 앞에서 배운 기본 내용을 바탕으로 실습을 통해 실제 리액트 사용법을 익히는 학습 형태로 구성되어 있습니다.
15장에서는 스타일링을 하기 위해 CSS의 기본적인 문법과 선택자에 대해 배우고 styled-components를 다루는 법을 간단하게 배웁니다.
16장에서는 앞에서 배운 내용을 토대로 미니 블로그를 직접 만들어 봅니다. 프로젝트 생성부터 각종 컴포넌트를 모두 직접 코드를 작성하며 개발해 봅니다.
★ 대상 독자
이 책은 리액트를 처음 접하는 입문자를 대상으로 합니다. HTML과 자바스크립트를 다뤄본 경험이 있다면 수월하게 이 책의 과정을 따라갈 수 있습니다.
