[목 차]
  

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 create-react-app으로 리액트 애플리케이션 생성하기

2.2 Vite로 리액트 애플리케이션 생성하기

2.3 마치며

 

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 컴포넌트 구현하기

 

부록 A 리액트 18 소개

A.1 자동 배칭

A.2 트랜지션

A.3 서스펜스

A.4 클라이언트와 서버 렌더링 API 업데이트

A.5 새로운 Strict 모드 작동 방식

A.6 새로 추가된 훅들

 

부록 B 리액트 19 소개

B.1 리액트 19의 새로운 기능

B.2 리액트 서버 컴포넌트

B.3 리액트 19에서 개선된 점

이민규 ((주)엠케이랩스 대표 / StarUML 개발자)

리액트가 웹 프론트엔드 분야에서 사실상 하나의 표준으로 자리 잡으면서 배우고자 하는 사람들이 많이 늘어나고 있습니다. 이 책은 처음 리액트를 배우려는 독자에게 매우 적합합니다. 처음부터 단계별로 따라 하다 보면 어느새 리액트를 자유자재로 활용할 수 있는 단계에 도달하게 될 것입니다. 리액트 세계에 입문하는 것을 주저하고 있다면 이 책을 통해 리액트를 시작해보기 바랍니다.

 

김유민 (Take App 창업자 / 전 페이스북 엔지니어링 매니저)

리액트 개발을 시작하거나 다시 도전하는 독자에게 추천합니다. 개발 환경 설정부터 현업에서 쓸 수 있는 개발 팁 그리고 최신 트렌드까지 배울 수 있습니다. 리액트의 중요한 개념을 모두 다루고 있고 장별로 요점 정리가 잘 되어 있어서 코딩 인터뷰를 보러 가기 전에 빠르게 복습하기에도 좋을 것 같습니다. 다년간 현업에서의 경험을 기반으로 한 저자의 현실적인 조언과 내공이 돋보입니다.

 

장래영 (비햅틱스 소프트웨어 엔지니어)

어떤 기술을 잘 가르치면서 개발에도 능숙한 저자가 쓴 책을 찾기란 생각보다 쉽지 않습니다. 상용 서비스 개발, 오픈소스 프로젝트 활동, 강의, 멘토링 등 다양한 분야에서 활발하게 활동하고 있는 저자의 책이므로 리액트를 처음 시작하는 독자에게 좋은 지침이 될 것이라 믿어 의심치 않습니다.

 

장영재 (비바리퍼블리카 프론트엔드 엔지니어)

리액트를 이용해 프론트엔드 개발자로서 첫발을 내딛고자 하는 독자에게 추천하고 싶은 훌륭한 안내서입니다. 빠르게 리액트 개발을 시작할 수 있도록 많이 쓰지 않는 내용은 과감히 제외하고 컴포넌트와 State, 훅, 이벤트 핸들링 등 필수적으로 알아야 할 내용을 압축해서 설명합니다. 중간중간 독자가 궁금해할 부분도 따로 친절하게 알려줍니다. 또한 장마다 다양한 실습 예제와 깔끔하게 정리된 요약을 제공하여 앞서 배운 내용을 제대로 이해하고 있는지 확인할 수 있습니다. 리액트 개발의 문턱이 높게 느껴져 망설이고 있다면 이 책으로 도전해보세요.

 

강지현 (_(주)맘편한세상 공동 창업자 / 백엔드 엔지니어)

HTML, CSS, 자바스크립트와 같은 필수 지식을 거쳐 리액트가 무엇이고 어떻게 동작하는지, 왜 사용하는지를 쉽게 풀어 썼습니다. 또한 입문자에게는 다소 어렵게 느껴질 수 있는 조건부 렌더링이나 리스트 렌더링, 리액트 훅에 대한 부분도 매우 쉽게 설명하고 있습니다. 각 장은 개념을 익히는 부분과 실습으로 나누어져 있는데 앞에서 배운 내용이 잘 이해되지 않는다면 실습을 먼저 해보면 감을 잡을 수 있을 것입니다. 전반적으로 부담 없이 따라갈 수 있어 리액트 개발을 처음 시작하는 독자에게 강력히 추천합니다.

 

이유번 ((주)딥네츄럴 디자인 디렉터)

비 개발자가 읽어도 쉽게 이해할 수 있는 예제와 친절한 설명이 돋보입니다. 특히 비 개발자에게

익숙하지 않은 개발 환경 구축 방법도 자세히 알려 줍니다. HTML과 CSS에 대한 배경지식을

어느 정도 가지고 있는 독자라면 이 책을 통해 리액트의 매력에 흠뻑 빠질 수 있을 것입니다.

또한 지금과는 다른 제품을 구상할 수 있는 기회도 얻을 수 있다고 생각합니다. 개발자와 함께

협업하는 디자이너 또는 기획자도 이 책을 보면 많은 도움을 얻을 수 있을 것입니다.

 

강경완 ((주)우아한형제들 안드로이드 개발자)

이 책은 간단하지만 실용적인 예제로 리액트를 쉽게 알려줍니다. 친절한 기본 개념 설명에 더해 다양한 실습과 알찬 프로젝트도 담고 있어 재미있게 리액트 공부를 할 수 있습니다. 웹 개발 지식이 없더라도 차근차근 실습을 따라 하다 보면 자연스럽게 리액트의 역할을 이해할 수 있을 것입니다. 리액트를 처음 시작하는 개발자에게 단연 최고의 책이라고 생각합니다.

 

전웅 ((주)아씨오 소프트웨어 엔지니어)

이제 리액트는 웹은 물론 데스크톱과 모바일 앱 제작에도 쓰이는 강력한 라이브러리로 자리 잡았습니다. 하지만 빠르게 발전을 거듭해온 만큼 리액트 관련 자료는 방대하고 파편화되어 있어 처음 접할 때 큰 어려움을 겪기 마련입니다. 이 책에는 긴 시간 리액트 프로젝트를 진행한 저자의 경험이 녹아 있으며, 리액트를 소화하기 위해 반드시 알아야 하는 기본 개념부터 실습 프로젝트까지 차곡차곡 담겨 있습니다. 물 흐르듯 이어지는 설명을 따라가다 보면 어느새 리액트를 소화하고, 그 매력에 빠진 자신을 발견할 수 있을 것입니다.