신간보도자료	(주)도서출판 길벗 서울시 마포구 월드컵로 10길 56(서교동) 대표전화 (02)332-0931/팩스 (02)323-0586 홈페이지 www.gilbut.co.kr 담당자 : 신유진(backdoosan@gilbut.co.kr)

신간안내	프론트엔드 입문자를 위한 리액트의 정석 with 타입스크립트

프론트엔드 입문자를 위한

리액트의 정석 with 타입스크립트

▶ 발행 : (주)도서출판 길벗

▶ 발행일 : 2025년 3월 31일

▶ 지은이 : 이창현

▶ 쪽수 : 488쪽

▶ 판형 : 183 * 235(mm)

▶ 높이(두께) : 19.5(mm)

▶ 정가 : 34,000원

▶ ISBN : 979-11-407-1293-9 93000

*분야

<교보문고> 국내도서 > 컴퓨터/IT > 프로그래밍 언어 > 프로그래밍일반

국내도서 > 컴퓨터/IT > 대학교재

국내도서 > 대학교재 > 컴퓨터

<예스24>  국내도서 > IT 모바일 > 프로그래밍 언어 > JavaScript/CGI

국내도서 > IT 모바일 > 컴퓨터 공학 > 컴퓨터 교육

국내도서 > 대학교재 > 공학계열 > 컴퓨터공학

<알라딘>  국내도서 > 컴퓨터/모바일 > 프로그래밍 언어 > 프로그래밍 언어 기타

국내도서 > 대학교재 > 공학계열 > 컴퓨터공학 > 프로그래밍 언어

<인터파크> 도서 > 컴퓨터/인터넷 > IT전문서 > 프로그래밍 언어 > 프로그래밍 언어 기타

도서 > 전공도서/대학교재 > 공학계열 > 컴퓨터공학

<영풍문고> 국내도서 > 컴퓨터/IT > 컴퓨터언어 > 기타언어 / 언어일반/어셈블리,파스칼

국내도서 > 기술/공학 > 정보/통신공학 > 정보통신일반

[간단한 책 소개]

리액트와 타입스크립트를 결합하여 효율적인 웹 개발 학습

객체지향 프로그래밍 개념과 원리를 학습하여 실무 개발자되기

《리액트의 정석 with 타입스크립트》는 기존의 리액트 및 타입스크립트 학습서들과는 전혀 다른 시각에서 구성되었습니다.

단순히 타입스크립트 기반에서 리액트만 다루는 것이 아니라 그 근본이 되는 프로그래밍 원

리부터 객체지향 개념, 타입스크립트의 기초까지 탄탄히 익힐 수 있도록 설계되었습니다.

이 책은 크게 네 개의 마당(파트)으로 나뉩니다.

첫째 마당 - 프로그래밍의 기본 원리

컴퓨터 시스템의 기본 동작 원리와 메모리 구조, 프로그래밍의 핵심 개념을 다룹니다. 이

를 통해 코드가 실제로 어떻게 실행되는지 이해할 수 있습니다.

둘째 마당 - 객체지향 개념의 이해

객체지향 프로그래밍(OOP)의 개념과 자바스크립트에서의 객체지향 구현 방식을 살펴봅

니다. 여기서는 클래스, 프로토타입, 상속, 캡슐화 등 객체지향의 개념을 다룹니다.

셋째 마당 - 타입스크립트의 기초

타입스크립트의 핵심 문법과 개념을 정리하고, 정적 타입 시스템이 코드의 안정성과 유지

보수성을 어떻게 향상시키는지 설명합니다.

넷째 마당 - 타입스크립트 기반의 리액트

타입스크립트를 적용한 리액트 개발 방식에 대해 학습하고, 실무에서 자주 접할 수 있는

패턴과 모범 사례를 소개합니다.

《리액트의 정석 with 타입스크립트》는 “왜 리액트를 사용하는가?”, “왜 타입스크립트가 필요한가?”, “프로그래밍의 기본 원리는 무엇인가?”라는 근본적인 질문에 대한 답을 찾는 과정에서 이 책을 모두 읽고 나면, 단순한 웹 개발자가 아닌, 진정한 소프트웨어 개발자로 성장할 수 있을 것입니다

[출판사 리뷰]

리액트와 타입스크립트로 배우는 웹 개발

리액트는 단순한 UI 라이브러리를 넘어, 소프트웨어 개발의 핵심 개념을 깊이 있게 이해하고 적용할 수 있는 강력한 도구입니다. 이 책에서는 리액트를 배우는 과정에서 왜 타입스크립트가 필요한지, 객체지향 개념이 어떻게 리액트에 적용되는지를 상세히 설명합니다. 또한, 리액트를 통해 코드가 실제로 어떻게 실행되는지, 컴퓨터 시스템과 메모리 구조가 어떻게 연결되는지를 이해할 수 있습니다.

무엇보다 리액트와 타입스크립트의 결합은 단순히 개발 효율을 높이는 것 이상의 의미를 지닙니다. 정적 타입 시스템을 통해 코드의 안정성과 유지 보수성을 향상시킬 수 있으며, 객체지향 프로그래밍의 개념을 적용하여 코드 구조를 더욱 깔끔하고 효율적으로 만들 수 있습니다.

리액트는 함수형 컴포넌트와 Hooks를 활용해 직관적이고 간결한 코드 작성을 가능하게 하며, 실무에서 자주 접하는 패턴과 모범 사례를 통해 더 나은 개발 습관을 길러줍니다.

이 책을 통해 리액트와 타입스크립트를 깊이 있게 배우며, 웹 개발의 근본 원리를 이해하고 실력 있는 개발자로 성장할 수 있습니다.

Step 1 프로그래밍의 기본 원리

컴퓨터 시스템의 동작 원리와 메모리 구조, 프로그래밍 학습

Step 2 객체지향 개념의 이해

클래스, 프로토타입, 상속, 캡슐화 등 객체지향의 개념 학습

Step 3 타입스크립트의 기초

타입스크립트의 핵심 문법과 개념, 정적 타입 시스템 학습

Step 4 타입스크립트 기반의 리액트

타입스크립트를 적용한 리액트 개발 방식과 실무 패턴 사례

[저자 소개]

이창현│jamsuham75@naver.com

컴퓨터공학을 전공하고 20여 년 간 다양한 산업체에서 소프트웨어(SW) 개발자로 활동했다. 최근에는 AI 활용 솔루션 및 데이터 보안 연구에 깊은 관심을 가지고 있으며, 평소에도 연구한 기술을 정리하고 소통하는 것을 즐긴다. 이러한 성향 덕분에 집필, 번역, 강의 등을 통해 독자 및 학생들과 활발히 소통하고 있으며, 특히 미래의 IT 개발자를 꿈꾸는 학생들을 교육하는 데 주력하고 있다.

현) 이창현코딩연구소 대표

전) 성신여자대학교 융합보안공학과 겸임교수

전) 서울시중부기술교육원 응용소프트웨어과 교수

전) ㈜SK 이노에이스 모바일엔진개발

전) ㈜웹젠 3D엔진 개발

대표 저서

『백엔드 입문자를 위한 모던 자바스크립트&Node.js』 길벗캠퍼스, 2023

『나혼자 C언어』 디지털북스, 2021

『나혼자 파이썬』 디지털북스, 2020

『C# 프로그래밍의 정석』 혜지원, 2019 등 총 9권

번역서

『스파크를 이용한 자연어 처리』 한빛미디어, 2021

『데이터 익명화를 위한 파이프라인』 한빛미디어, 2022

블로그 : https://blog.naver.com/jamsuham75

유튜브 : https://www.youtube.com/@jamsuham75

[목차 소개]

첫째 마당. 프로그래밍의 기본 원리

1장 | 프로그래밍을 시작할 결심

1.1 왜 컴파일 기반의 언어를 학습해야 하는가

모든 프로그래밍 언어의 동작 원리는 거의 동일하다

왜 컴파일 기반의 언어를 학습해야 하는가

1.2 프로그래밍의 개념

프로그래밍이란

프로그래밍 언어란

컴퓨터 언어와 사람을 위한 언어

프로그래밍 작성 과정

1.3 개발 환경 구축하기

어떤 컴파일러를 사용해야 할까?

Visual Studio Community 설치하기

새 프로젝트 만들기

1.4 생애 최초 C 언어로 Hello World 출력하기

Hello World를 출력하는 의미

Hello World 무작정 작성하기

헤더 파일에 관하여

프로그래밍의 기본 구성 요소 함수

출력 함수 printf에 대한 이해

문장의 끝 세미콜론(;)

리턴값에 관하여

주석문을 사용하자

2장 | 꼭 알아두어야 할 기본 문법과 원리

2.1 변수와 자료형

변수란

자료형이란

2.2 연산자

연산자란

산술 연산자

대입 연산자

증감 연산자

관계 연산자

논리 연산자

2.3 조건문

조건문이란

if 문의 기본 원리

if~else 문

if~else if~else 문

2.4 반복문

반복문이란

for 문의 기본 원리

for 문의 활용

이중 반복문

무한 반복

while 문의 기본 원리

2.5 함수

함수란 무엇인가

함수를 왜 사용할까

함수형 기반 언어의 구조

함수형 종류

함수의 기본 형태

함수 정의 및 호출하기

2.6 배열

배열이란 무엇인가

배열은 왜 사용할까

배열의 구조

배열의 복사

문자열 변수

null 문자에 관하여

3장 | 코드 안에서 일어나는 동작 원리

3.1 포인터

포인터를 알아야 하는 이유

변수 선언 시 메모리 구조

포인터의 개념

포인터의 기본 사용법

3.2 포인터와 배열

배열 이름의 의미

배열의 이름과 포인터 변수의 차이점

3.3 함수 포인터

함수 포인터 사용

함수 포인터를 사용하는 이유

3.4 구조체, 공용체, 열거형

구조체란

공용체

열거형

3.5 동적 메모리 할당

동적으로 메모리를 할당해야 하는 이유

동적 메모리 할당 및 해제

동적 메모리의 구조

동적 메모리를 알아야 하는 이유

둘째 마당. 객체지향에 대한 이해

4장 | 객체지향 철학의 이해

4.1 객체지향 철학에 관하여

객체지향 철학을 왜 이해해야 하는가

객체지향이란

4.2 추상화

추상화(抽象化)와 추상화(抽象畫)

추상화란 무엇인가

추상화를 사용하는 이유

플라톤의 이데아론

4.3 캡슐화

캡슐화란

은닉된 데이터의 인터페이스

4.4 전통적인 클래스의 구조와 사용 이유

클래스란

클래스의 선언 형식

접근 지정자

객체의 선언

객체의 생성

생성자의 개념

클래스를 사용하는 이유

5장 | 객체지향 기반의 재사용과 유연한 동작

5.1 상속성

현실 세계에서의 상속

클래스의 상속

프로젝트 관점의 상속

5.2 다형성

다형성의 의미

오버로딩의 개념

오버로딩의 구현

오버라이딩

5.3 자바스크립트 기반의 클래스 구조와 사용 방법

자바스크립트의 클래스 구조

자바스크립트 클래스의 사용 방법

자바스크립트 클래스의 상속과 오버라이딩

5.4 인터페이스

인터페이스란

인터페이스 구현

인터페이스를 사용하는 이유

추상 클래스를 상속하는 경우

인터페이스를 상속하는 경우

5.5 람다를 통한 화살표 함수의 이해

익명 메소드

람다식이란

람다식 표현

자바스크립트 기반 화살표 함수

화살표 함수를 사용하는 이유

셋째 마당. 타입스크립트의 기초

6장 | 타입스크립트와 실행 환경

6.1 타입스크립트

타입스크립트란

데이터 타입을 표기하면 좋은 점

타입스크립트의 컴파일

타입스크립트의 사용 이유

6.2 타입스크립트 실행 환경

Node.js와 npm 설치하기

명령 프롬프트로 Node.js 확인하기

타입스크립트 설치하기

Visual Studio Code 다운로드 및 설치하기

Visual Studio Code 실행하기

6.3 타입스크립트 기반 프로젝트

첫 번째 타입스크립트 코드 만들기

중복 선언 문제 해결하기

자동 컴파일하기

7장 | 기본 데이터 타입 사용하기

7.1 데이터 타입과 추론

자바스크립트의 데이터 타입

타입스크립트의 데이터 타입과 추론

배열 타입 추론

함수 리턴 타입 추론

객체 리터럴 타입 추론

타입스크립트의 데이터 타입 종류

7.2 타입 명시

기본 데이터 타입 명시

null과 undefined 타입 명시

7.3 함수의 데이터 타입

함수 매개변수와 반환 타입 명시

함수에서 매개변수를 생략할 수 없는 경우

선택적 매개변수 사용

매개변수 기본값 설정

나머지 매개변수

7.4 배열과 튜플 타입

배열 타입

튜플 타입

8장 | 객체 데이터 타입 사용하기

8.1 객체의 데이터 타입

기본 객체 타입 선언하기

중첩된 객체 타입

선택적 속성

읽기 전용 속성

객체의 타입과 함수 결합

8.2 인터페이스

인터페이스 만들기

선택적 속성이 있는 인터페이스

읽기 전용 속성이 있는 인터페이스

인터페이스로 함수 타입 정의

인터페이스 간 상속

클래스와 인터페이스 구현

객체 리터럴과 클래스 사용의 차이점

8.3 열거형과 유니온 타입

열거형 타입

유니온 타입

8.4 타입 별칭과 리터럴 타입

타입 별칭

리터럴 타입

8.5 타입 가드

타입 가드란

typeof를 사용한 타입 가드

instanceof를 사용한 타입 가드

in 연산자를 사용한 타입 가드

null 체크를 사용한 타입 가드

넷째 마당. 타입스크립트 기반의 리액트

9장 | 리액트 시작하기

9.1 리액트

리액트란

리액트의 특징

리액트 공식 사이트

9.2 리액트의 동작 원리

컴포넌트란

렌더링이란

가상 DOM

초기 렌더링과 재렌더링

재조정 과정

9.3 리액트에서 타입스크립트를 사용하는 이유

9.4 타입스크립트 기반의 리액트 환경 설정

프로젝트 생성하기

프로젝트 파일 구조 확인하기

타입스크립트 설정 파일(tsconfig.json) 확인하기

리액트 빌드 및 실행하기

9.5 리액트 기본 앱의 실행 구조

index.html 파일 확인하기

main.tsx 파일 확인하기

App.tsx 파일 확인하기

스타일 설정하기

10장 | 리액트의 기본 개념

10.1 일정 관리 앱 프로젝트 만들기

무엇을 만들 것인가

프로젝트 생성하기

10.2 반드시 알아두어야 할 JSX 기본 문법

JSX란

JSX로 화면에 Hello React 출력하기

출력 내용 감싸기

변수의 데이터 바인딩, 중괄호

클래스 선택자, className

인라인 스타일링, style

태그 꼭 닫기

주석

10.3 컴포넌트 만들기

컴포넌트의 종류

클래스형 컴포넌트

함수형 컴포넌트

TodoList 컴포넌트 만들기

함수형 컴포넌트 타입 React.FC

10.4 변수와 상태

상태란

상태를 사용하는 방법

상태 코드 반영하기

상태 데이터 여러 개 저장하기

상태 변경 함수

상태 함수를 사용해야만 하는 이유

스타일 추가 및 수정하기

할 일 목록 타입 확장하기

10.5 구조 분해 할당 이해하기

구조 분해 할당

배열의 구조 분해 할당

객체의 구조 분해 할당

10.6 반복 루틴 처리하기

map 함수 사용하기

key 속성 사용하기

10.7 이벤트 처리와 상태 업데이트하기

체크 박스 추가하기

체크 이벤트 처리하기

체크 여부에 따라 취소선 출력하기

10.8 부트스트랩을 사용하여 UI 적용하기

부트스트랩 설치하기

부트스트랩 CSS 파일 추가하기

현재 코드에 부트스트랩 적용하기

11장 | 리액트의 활용

11.1 게시물 입력하기

입력 텍스트 박스와 추가 버튼 배치하기

새로운 할 일을 목록에 추가하기

스프레드(...) 연산자

11.2 타이머로 현재 시각 출력하기

타이머 컴포넌트 만들기

시계 컴포넌트 만들기

11.3 게시물 삭제하기

게시물 삭제 버튼 배치하기

게시물 삭제 기능 구현하기

11.4 상세보기 대화상자 만들기

모달 대화상자 추가하기

게시물을 선택했을 때 이벤트 등록하기

게시물을 선택했을 때 상세 페이지 출력하기

11.5 다른 컴포넌트에 데이터 전달하기: props

프롭스란

함수형 컴포넌트에서 프롭스 사용하기

클래스형 컴포넌트에서 프롭스 사용하기

태그 사이의 내용을 보여주는 children

구조 분해 할당 문법을 통해 props 내부 값 추출하기

프롭스로 함수 전달하기

상세 페이지 컴포넌트화하기

상세 페이지에 프롭스로 데이터 전달하기

12장 | 리액트 라우팅

12.1 도서 쇼핑몰 프로젝트 만들기

타입스크립트 기반의 새 프로젝트 생성하기

리액트 부트스트랩 환경 설정하기

리액트 부트스트랩 컴포넌트 사용하기

레이아웃 만들기

12.2 메인 화면 구성하기

상단 바 만들기

이미지 넣기

이미지를 캐러셀에 적용하기

12.3 도서 상품 데이터 가져오기

베스트 도서 상품 데이터 만들기

데이터 가져오기

BookItem 컴포넌트 만들기

12.4 푸터 만들기

Footer 컴포넌트 내용 추가하기

12.5 라우팅하기

라우터로 페이지 나누기

상세 페이지 만들기

URL 파라미터로 여러 개의 상세 페이지 만들기

404 페이지 오류 처리하기

13장 | 리액트 훅

13.1 컴포넌트 라이프 사이클

컴포넌트 라이프 사이클이란

클래스형 컴포넌트 기반 라이프 사이클

13.2 함수형 컴포넌트

라이프 사이클과 useEffect

useEffect란

함수형 컴포넌트 기반 라이프 사이클

useEffect를 이용한 타이머 사용하기

useEffect를 사용하지 않았다면

useEffect를 이용한 API 데이터 요청하기

useEffect를 이용한 팝업 페이지 출력하기

13.3 훅(Hooks)에 관하여

훅이란

훅의 종류

useRef 사용 방법

useMemo 사용 방법

useCallback 사용 방법

useCallback을 사용하는 이유

14장 | 데이터 통신과 페이지 구현하기

14.1 Ajax를 활용한 데이터 송수신하기

Ajax를 사용한 비동기 통신

14.2 도서 목록 페이지 구현하기

리액트에서의 Ajax 호출 방식

Ajax로 불러온 데이터 바인딩하기

14.3 About 페이지 구현하기

About 페이지 레이아웃 설계하기

About 페이지 기능 구현하기

14.4 Contact 페이지 구현하기

Contact 페이지 UI 구현하기

14.5 로그인 페이지 구현하기

로그인 페이지 UI 구현하기

로그인 아이콘 추가하기

15장 | 리덕스 툴킷을 사용한 상태 관리

15.1 카트 페이지 만들기

카트 페이지 구성 요소

라우터 추가하기

CartPage 컴포넌트 작성하기

15.2 리덕스를 사용하는 이유 및 리덕스 설치

카트 페이지에 데이터 바인딩하기

이 코드에서 생각해 볼 구조 문제점 및 개선점

리덕스를 사용하는 이유

리덕스 툴킷 설치하기

리덕스 툴킷 설정하기

15.3 리덕스 store에 상태 저장하고 사용하기

리덕스 store에 상태 저장하기

리덕스 store에서 상태 가져오기

도서 데이터를 store에 저장하고 바인딩하기

15.4 리덕스 store의 상태 변경하기

상태 변경 함수 정의하기

상태 변경 함수 사용하기

리덕스 상태 사용 방법

왜 디스패치(dispatch)를 사용할까?

15.5 상태가 object 또는 Array일 경우 변경하기

상태가 object인 데이터 변경하기

15.6 전달 인자를 활용한 상태 업데이트

상태 변경 함수에 전달 인자 전달하기

카트 페이지 상품의 수량 변경하기

15.7 카트 페이지 기능 개선하기

useMemo를 사용한 성능 개선하기

카트 메뉴 추가하기

<카트에 담기> 버튼을 클릭했을 때 카트에 상품 추가하기

카트의 도서 수량 변경하기

카트의 데이터 유지하기

카트 비우기

15.8 리액트 배포하기

현재 소스 코드의 리소스 용량

배포 파일 생성하기

내부에서 수행되는 작업

배포 파일 실행하기

찾아보기