메뉴 바로가기 검색 및 카테고리 바로가기 본문 바로가기

한빛출판네트워크

한빛랩스 - 지식에 가능성을 머지하다 / 강의 콘텐츠 무료로 수강하시고 피드백을 남겨주세요. ▶︎

소문난 명강의_소플의 처음 만난 리액트 2판

리액트 기초와 핵심 개념을 가장 쉽게 알려 주는 입문자 가이드

한빛미디어

집필서

판매중

4.8점 (21명)
좋아요 : 3

만 명이 선택한 인기 리액트 강의를 그대로 담은 책!

이 책은 오픈소스 자바스크립트 라이브러리인 리액트를 처음 배우는 개발자를 위한 책이다. 먼저 웹 서비스를 만들기 위해 알아야 할 리액트의 필수 개념을 짚어 본다. 그리고 간단한 실습으로 리액트 사용법을 익힌 뒤 실무 밀착형 프로젝트(미니 블로그 만들기)를 진행하며 직접 기획부터 개발까지 경험해 본다. 리액트 핵심 개념을 기초부터 탄탄히 익히고 실제 업무에 도움을 줄 수 있는 프로젝트 진행을 통해 체계적으로 학습할 수 있도록 구성되었다.

 

상세이미지_소플의 처음 만난 리액트 2판(700).jpg

이인제 저자

이인제

어릴 적부터 컴퓨터와 프로그래밍에 관심이 많아 멋진 개발자가 되는 게 꿈이었다. 숭실대학교 컴퓨터학부를 조기 졸업하고 카이스트에서 전산학 석사 학위를 취득한 뒤, 다양한 회사와 스타트업에서 경험을 쌓고 프리랜서 개발자로도 활동했다. 분야를 가리지 않고 항상 즐겁게 개발하려고 노력하고, 소프트웨어 교육 활동에 적극적으로 참여한다. 이런 활동의 연장선으로 다양한 온라인 강의를 하고 있으며, 패스트캠퍼스에서 만든 부트캠프인 Kernel360의 프론트엔드 디렉터로도 활동 중이다. 현재는 1인 스타트업을 창업하여 제품 개발과 회사를 운영하는 데 힘쓰고 있다.

 

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 새로 추가된 훅들

쉽고 재미있게 익히는 리액트 기초와 핵심 개념

메타에서 개발한 오픈소스 자바스크립트 UI 라이브러리인 리액트는 프런트엔드 개발자가 반드시 알아야 할 기술입니다. 복잡한 웹 애플리케이션을 쉽고 빠르게 구현 및 관리할 수 있게 해 주는 도구가 리액트입니다. 이 책은 리액트 기초와 핵심 개념을 이해하기 쉽게 설명하고, 간단한 실습을 통해 리액트 활용법을 익힐 수 있도록 도와줍니다. 또한 블로그를 만들어 보면서 짧고 굵게 기획부터 개발에 이르는 과정을 경험할 수 있습니다. 지금부터 세상에서 가장 인기 있는 웹 개발 도구인 리액트의 매력에 빠져 보세요!

 

★ 2판에서 바뀐 내용

리액트 18 기준 예제 코드 전면 수정

리액트 18의 새로운 기능 소개

실습 화면 코드 별도 수록

 

★ 이 책에서 배우는 내용

기초 지식 및 개발 환경 

리액트 소개 및 준비 

JSX

엘리먼트 렌더링

컴포넌트와 Props

state와 생명주기

훅  

이벤트 핸들링

조건부 렌더링

리스트와 키

State 끌어올리기 

합성과 상속

컨텍스트

스타일링

미니 블로그 만들기

리액트 18 소개

 

★ 이 책의 구성

0장은 리액트를 배우기 전에 알아야 할 기초 지식과 실습을 진행할 개발 환경 설정에 대해 설명합니다. 

 

1~2장은 리액트의 기본 개념과 장단점에 대해 배우고 간단한 실습을 통해 리액트를 적용해 봅니다.

 

3장부터 14장까지는 리액트의 요소별 기능에 대해 설명합니다. 각 장의 전반부는 배우고자 하는 리액트 요소의 역할과 기본 개념을 다룹니다. 후반부에서는 앞서 배운 내용을 바탕으로 실습을 진행하면서 리액트 사용법을 익힐 수 있도록 구성되어 있습니다.

 

15장에서는 웹 애플리케이션을 스타일링하기 위한 CSS 기본 문법과 선택자에 대해 알아보고 styled-components를 다루는 법을 간단하게 배웁니다. 

 

16장에서는 앞에서 배운 내용을 토대로 미니 블로그를 직접 만들어 봅니다. 프로젝트 생성부터 시작하여 직접 여러 컴포넌트까지 구현해 봅니다.

 

★ 대상 독자

이 책은 리액트를 처음 접하는 입문자를 대상으로 합니다. HTML과 자바스크립트를 다뤄 본 경험이 있다면 수월하게 이 책을 읽을 수 있습니다. 하지만 웹 개발을 해 본 적이 없어도 학습 과정을 따라갈 수 있도록 HTML과 자바스크립트, CSS 기초 내용을 설명하고 있습니다. 

 

★ 예제 소스

https://github.com/soaple/first-met-react-practice-v18

 

★ 유튜브 강의

https://youtube.com/c/소플TV