장바구니 담기 close

장바구니에 상품을 담았습니다.

장바구니로 계속쇼핑하기
코딩 자율학습 리액트 프런트엔드 개발 입문
미리보기

코딩 자율학습 리액트 프런트엔드 개발 입문

  • 김기수
  • |
  • 길벗
  • |
  • 2025-09-01 출간
  • |
  • 820페이지
  • |
  • 183 X 235 X 33mm
  • |
  • ISBN 9791140715541
판매가

42,000원

즉시할인가

37,800 원

배송비

무료배송

(제주/도서산간 배송 추가비용:3,000원)

추가상품
상품선택
독서대 7,900원 독서대 선택안함 0원
수량
+ -
총주문금액
37,800원
장바구니 구매하기

※ 스프링제본 상품은 반품/교환/환불이 불가능하므로 신중하게 선택하여 주시기 바랍니다.

북스크린영상으로 만나보는 한 권의 책 이야기

출판사서평

각 장은 핵심 개념 설명과 실습 예제를 결합해 입문자도 무리 없이 따라갈 수 있도록 구성되었습니다. 전통적인 CSS부터 Tailwind CSS까지 다양한 스타일링 방법을 비교하며, React.memo, useCallback, useTransition 같은 성능 최적화 기법과 리액트 19의 새로운 기능을 예제를 통해 자연스럽게 익힙니다. 또한 Fetch API, Axios, Node.js 기반 API 서버 구현까지 다뤄, 프런트엔드와 백엔드 연동 흐름을 이해할 수 있습니다.

학습 단계에 맞춰 계산기, 할 일 관리 애플리케이션, 나만의 블로그 만들기 프로젝트를 직접 구현하면서 이론과 실무를 연결합니다. 이를 통해 단순한 문법 학습을 넘어, 실제 서비스 개발에 필요한 문제 해결 능력을 키울 수 있습니다. 이 책은 리액트와 타입스크립트의 기반을 탄탄히 다지고 싶은 모든 독자에게 든든한 길잡이가 될 것입니다.

목차

1장 리액트 시작하기
1.1 리액트 개요
1.1.1 리액트의 핵심 철학
1.1.2 리액트의 특징
1.1.3 리액트를 배워야 하는 이유
1.1.4 리액트의 발전
1.2 개발 환경 설정하기
1.2.1 Node.js 설치
1.2.2 VSCode 설치
1.2.3 VSCode 익스텐션 설치
1.2.4 웹 브라우저 설치
1.3 리액트 애플리케이션 만들기
1.3.1 Vite로 프로젝트 생성하기
1.3.2 불필요한 폴더와 파일 삭제 및 수정하기
1.3.3 기본 구조 살펴보기

2장 JSX 개요
2.1 JSX란
2.2 JSX의 문법적 특징
2.2.1 하나의 루트 요소로 반환하기
2.2.2 모든 태그 닫기
2.2.3 태그 속성은 카멜 케이스로 작성하기
2.2.4 표현식은 중괄호 안에서 사용하기
2.2.5 인라인 스타일은 객체로 지정하기
2.2.6 중괄호 안에 주석 작성하기

3장 컴포넌트
3.1 컴포넌트란
3.2 컴포넌트의 종류
3.2.1 클래스 컴포넌트
3.2.2 함수형 컴포넌트
3.2.3 클래스 컴포넌트와 함수형 컴포넌트 사용
3.3 컴포넌트 기초
3.3.1 컴포넌트 확장자
3.3.2 컴포넌트 정의
3.3.3 컴포넌트 추가
3.3.4 컴포넌트 트리
3.4 컴포넌트와 props 객체
3.4.1 props 객체란
3.4.2 props 객체 타입 알아내기
3.4.3 props 객체의 구조 분해 할당과 타입 정의
3.4.4 props와 전개 연산자
3.4.5 children
3.5 컴포넌트와 이벤트
3.5.1 이벤트 속성
3.5.2 이벤트 핸들러
3.5.3 이벤트 객체
3.5.4 이벤트 전파

4장 컴포넌트 상태
4.1 컴포넌트의 상태란
4.2 useState 훅: 기본 상태 관리
4.2.1 useState 훅의 기본 문법
4.2.2 useState 훅 사용하기
4.2.3 useState 훅 여러 번 사용하기
4.2.4 useState 훅 사용 시 주의사항
4.3 useReducer 훅: 복잡한 상태 관리
4.3.1 useReducer 훅 기본 문법
4.3.2 useReducer 훅 사용하기
4.3.3 useReducer 훅 여러 번 사용하기
4.4 상태 관리 패턴
4.4.1 상태 전달하기
4.4.2 상태 끌어올리기
4.5 개발자 도구로 상태 값 확인하기

5장 컴포넌트 스타일링
5.1 전통적인 방법으로 스타일링하기
5.1.1 인라인 스타일
5.1.2 글로벌 스타일
5.1.3 CSS 모듈
5.1.4 classnames 라이브러리
5.2 CSS-in-JS로 스타일링하기
5.2.1 styled-components
5.2.2 emotion
5.2.3 vanilla-extract
5.3 Tailwind CSS로 스타일링하기
5.3.1 설치 및 기본 사용법
5.3.2 tailwlind-merge 라이브러리
5.4 이미지 렌더링하기
5.4.1 이미지 리소스 준비하기
5.4.2 public 폴더에서 이미지 렌더링하기
5.4.3 src 폴더에서 이미지 렌더링하기
5.5 폰트 적용하기
5.5.1 구글 폰트 적용하기
5.5.2 @font-face로 웹 폰트 적용하기

6장 실습: 계산기 만들기
6.1 실습 내용 소개
6.2 리액트 애플리케이션의 기본 구조 설정하기
6.2.1 프로젝트 생성하기
6.2.2 불필요한 폴더와 파일 정리하기
6.3 UI 구성하기
6.3.1 HTML 작성하기
6.3.2 CSS 작성하기
6.4 데이터 바인딩하고 이벤트 연결하기
6.4.1 데이터와 이벤트 핸들러 정의하기
6.4.2 이벤트 핸들러 정의하고 연결하기
6.5 로직 구현하기
6.5.1 숫자 입력 로직 구현하기
6.5.2 연산 로직 구현하기
6.5.3 초기화 로직 구현하기
6.5.4 소수점 로직 구현하기
6.5.5 예외 처리하기

7장 조건부 렌더링과 반복 렌더링
7.1 조건부 렌더링
7.1.1 if 문을 사용한 조건부 렌더링
7.1.2 삼항 연산자를 사용한 조건부 렌더링
7.1.3 AND 연산자를 사용한 조건부 렌더링
7.2 반복 렌더링
7.2.1 반복 렌더링의 기본 개념 이해하기
7.2.2 map() 메서드 사용하기
7.2.3 그 밖의 사용법

8장 폼 다루기
8.1 폼 정의하기
8.2 폼 제어하기
8.2.1 제어 컴포넌트
8.2.2 비제어 컴포넌트
8.3 폼 제어 한 단계 더 나아가기
8.3.1 useRef 훅 활용하기
8.3.2 커스텀 훅 사용하기
8.3.3 커스텀 훅 심화
8.4 폼 밸리데이션
8.4.1 기본 밸리데이션 사용하기
8.4.2 커스텀 밸리데이션 로직 추가하기
8.4.3 라이브러리 사용하기
8.5 리액트 19에서 ref 변경 사항
8.5.1 ref 객체의 컴포넌트 전달 방식
8.5.2 클린업 함수

9장 실습: 할 일 관리 애플리케이션 만들기
9.1 실습 내용 소개
9.2 UI 구성하기
9.2.1 기본 구조 설정하기
9.2.2 HTML 작성하기
9.2.3 CSS 작성하기
9.3 컴포넌트 분리하기
9.3.1 복잡한 〈svg〉 요소 컴포넌트로 분리하기
9.3.2 버튼 요소 컴포넌트로 분리하기
9.3.3 텍스트 입력 요소 컴포넌트로 분리하기
9.3.4 체크박스 요소 컴포넌트로 분리하기
9.3.5 레이아웃 요소 컴포넌트로 분리하기
9.4 기능 구현하기
9.4.1 할 일 목록 입력받기
9.4.2 할 일 목록 출력하기
9.4.3 할 일 완료 처리하기
9.4.4 할 일 삭제하기
9.4.5 할 일 수정하기

10장 고유 아이디와 사이드 이펙트
10.1 useId 훅
10.2 useEffect 훅
10.2.1 컴포넌트의 생명주기
10.2.2 useEffect 훅 사례
10.3 할 일 관리 애플리케이션 개선하기
10.3.1 폼 요소 연결하기
10.3.2 할 일 저장하기

11장 컴포넌트 최적화
11.1 컴포넌트 최적화 개요
11.1.1 성능 최적화 방법
11.1.2 불필요한 리렌더링
11.1.3 메모이제이션
11.2 컴포넌트 메모이제이션
11.2.1 React.memo 사용하기
11.2.2 React.memo 사용 시 주의사항
11.3 함수 메모이제이션
11.3.1 함수를 props로 전달하는 경우
11.3.2 useCallback 훅 사용하기
11.3.3 useCallback 훅 사용 시 주의사항
11.4 값 메모이제이션
11.4.1 연산 비용이 큰 작업의 성능 저하 문제
11.4.2 useMemo 훅 사용하기
11.4.3 useMemo 훅 사용 시 주의사항
11.5 로딩 성능 최적화
11.5.1 React.lazy()를 사용한 코드 스플리팅
11.5.2 Suspense
11.5.3 ErrorBoundary
11.6 상태 업데이트 최적화
11.6.1 useDeferredValue 훅(리액트 19 이후)
11.6.2 useTransition 훅
11.7 리소스 로딩 최적화(리액트 19 이후)
11.8 할 일 관리 애플리케이션 개선하기
11.8.1 불필요한 리렌더링 코드 찾기
11.8.2 불필요한 리렌더링 최적화하기

12장 전역 상태 관리
12.1 상태 관리 이해하기
12.1.1 로컬 상태 관리
12.1.2 전역 상태 관리
12.2 Context API로 전역 상태 관리하기
12.2.1 컨텍스트 객체 생성하기
12.2.2 Provider로 컨텍스트 범위 지정하기
12.2.3 useContext 커스텀 훅 만들기
12.2.4 컨텍스트로 공유되는 전역 상태 사용하기
12.2.5 렌더링 최적화하기
12.2.6 컨텍스트 중첩 사용하기
12.2.7 Context API 사용 시 주의사항
12.2.8 use 훅으로 Context API 사용하기(리액트 19 이후)
12.3 Redux로 전역 상태 관리하기
12.3.1 Redux와 Redux Toolkit 설치하기
12.3.2 Redux 스토어 생성하기
12.3.3 Redux 스토어 리액트에 제공하기
12.3.4 Redux 상태 슬라이스 만들기
12.3.5 슬라이스를 스토어에 추가하기
12.3.6 스토어 사용하기
12.3.7 값을 전달해 상태 변경하기
12.3.8 개발자 도구 활용하기
12.4 Zustand로 전역 상태 관리하기
12.4.1 Zustand 설치하기
12.4.2 Zustand 스토어 생성하기
12.4.3 Zustand 스토어 사용하기
12.4.4 Zustand의 고급 기능
12.5 할 일 관리 애플리케이션에 전역 상태 관리 적용하기
12.5.1 Zustand 설치하기
12.5.2 스토어 생성하기
12.5.3 스토어 사용하기

13장 리액트 라우터로 라우팅 기능 사용하기
13.1 라우팅 방식 이해하기
13.1.1 SPA와 CSR
13.1.2 MPA와 SSR
13.1.3 리액트와 리액트 라우터
13.2 리액트 라우터 다루기
13.2.1 리액트 라우터 설치하기
13.2.2 라우팅 컴포넌트 만들기
13.2.3 라우팅 범위 지정하기
13.2.4 라우트 설정하기
13.3 리액트 라우터 기능 사용하기
13.3.1 중첩 라우트
13.3.2 레이아웃 라우트
13.3.3 라우트 프리픽스
13.3.4 동적 세그먼트
13.3.5 옵셔널 세그먼트
13.3.6 스플랫
13.3.7 문서 메타데이터 설정하기(리액트 19 이후)
13.4 내비게이션 기능 사용하기
13.4.1 링크를 통한 이동
13.4.2 프로그래밍 방식 라우팅

14장 비동기 데이터 통신과 처리 기법
14.1 데이터 통신의 기초 개념
14.1.1 HTTP와 메서드
14.1.2 API
14.2 Node.js로 API 서버 만들기
14.2.1 API 서버 실행하기
14.2.2 API 서버 코드 확인하기
14.3 Fetch API로 데이터 통신하기
14.3.1 기본 문법
14.3.2 HTTP 메서드 사용법
14.3.3 리액트에서 사용하기
14.4 Axios로 데이터 통신하기
14.4.1 Axios 라이브러리 설치 및 기본 문법
14.4.2 HTTP 메서드 사용법
14.4.3 리액트에서 사용하기
14.5 데이터 통신 파고들기
14.5.1 초기 데이터 설정하기
14.5.2 응답 데이터 안전하게 처리하기
14.5.3 오류 상태 정의하고 오류 처리하기
14.5.4 로딩 상태 정의하고 처리하기
14.5.5 데이터 요청 취소하기
14.5.6 커스텀 훅 사용: Fetch API 방식
14.5.7 커스텀 훅 사용: Axios 방식
14.6 비동기 데이터 처리 심화
14.6.1 기본 예제 작성
14.6.2 useTransition 훅으로 비동기 데이터 처리하기
14.6.3 useActionState 훅으로 비동기 데이터 처리하기
14.6.4 useFormStatus 훅으로 비동기 데이터 처리하기
14.6.5 useOptimistic 훅으로 비동기 데이터 처리하기
14.6.6 use 훅 사용하기(리액트 19 이후)
14.6.7 use 훅 더 잘 사용하기(리액트 19 이후)

15장 프로젝트: 나만의 블로그 만들기
15.1 블로그 애플리케이션 개요
15.1.1 애플리케이션 UI
15.1.2 프로젝트 폴더 구조
15.2 UI 구성하기
15.2.1 스캐폴딩하기
15.2.2 라우팅하기
15.2.3 HTML 작성하기
15.2.4 CSS 작성하기
15.2.5 컴포넌트 분리하기
15.3 인증 기능 구현하기
15.3.1 백엔드 API 서버 실행하기
15.3.2 인증 기능 이해하기
15.3.3 인증 기능 구현하기
15.3.4 헤더 영역 분기 처리하기
15.3.5 새로 고침 후에도 인증 유지하기
15.3.6 페이지별 접근 제어 설정하기
15.3.7 액세스 토큰 값 요청에 포함시키기
15.4 CRUD 기능 구현하기
15.4.1 글쓰기 기능 구현하기
15.4.2 게시글 목록 표시 기능 구현하기
15.4.3 게시글 상세 페이지 구현하기
15.4.4 연관 게시글 기능 구현하기
15.4.5 검색 기능 구현하기
15.4.6 추가 기능: 토큰 만료 처리하기
15.4.7 추가 기능: 오류 처리하기
15.5 배포하기
15.5.1 빌드하기
15.5.2 Netlify로 배포하기

도서소개


 

추천포스트

교환 및 환불안내

도서교환 및 환불
  • ㆍ배송기간은 평일 기준 1~3일 정도 소요됩니다.(스프링 분철은 1일 정도 시간이 더 소요됩니다.)
  • ㆍ상품불량 및 오배송등의 이유로 반품하실 경우, 반품배송비는 무료입니다.
  • ㆍ고객님의 변심에 의한 반품,환불,교환시 택배비는 본인 부담입니다.
  • ㆍ상담원과의 상담없이 교환 및 반품으로 반송된 물품은 책임지지 않습니다.
  • ㆍ이미 발송된 상품의 취소 및 반품, 교환요청시 배송비가 발생할 수 있습니다.
  • ㆍ반품신청시 반송된 상품의 수령후 환불처리됩니다.(카드사 사정에 따라 카드취소는 시일이 3~5일이 소요될 수 있습니다.)
  • ㆍ주문하신 상품의 반품,교환은 상품수령일로 부터 7일이내에 신청하실 수 있습니다.
  • ㆍ상품이 훼손된 경우 반품 및 교환,환불이 불가능합니다.
  • ㆍ반품/교환시 고객님 귀책사유로 인해 수거가 지연될 경우에는 반품이 제한될 수 있습니다.
  • ㆍ스프링제본 상품은 교환 및 환불이 불가능 합니다.
  • ㆍ군부대(사서함) 및 해외배송은 불가능합니다.
  • ㆍ오후 3시 이후 상담원과 통화되지 않은 취소건에 대해서는 고객 반품비용이 발생할 수 있습니다.
반품안내
  • 마이페이지 > 나의상담 > 1 : 1 문의하기 게시판 또는 고객센터 : 070-4821-5101
교환/반품주소
  • 부산광역시 부산진구 중앙대로 856 303호 / (주)스터디채널 / 전화 : 070-4821-5101
  • 택배안내 : CJ대한통운(1588-1255)
  • 고객님 변심으로 인한 교환 또는 반품시 왕복 배송비 5,000원을 부담하셔야 하며, 제품 불량 또는 오 배송시에는 전액을 당사에서부담 합니다.