홈앤서비스 SK BROADBAND

★ AI에 대체되지 않는 개발자로 살아가는 무한 진리 공식
★ 더 깊게, 더 견고하게, 더 집요하게 개념과 원리로 승부하라!
★ 프론트엔드 개발자로 살아가하려면 핵심 역량, 리액트를 정복하라!

『다시 깊게 익히는 인사이드 리액트』는 프론트엔드 개발자들이 복잡한 웹 개발 환경에서 마주하는 문제들을 해결하고, 실제 애플리케이션을 효율적으로 구축할 수 있도록 돕는 리액스 중급서이다. 프론트엔드 기술이 왜, 어떻게 발전해왔는지 변천사를 이해함으로써, 웹 애플리케이션의 뼈대를 이루는 UI 컴포넌트를 설계하고 재사용성을 높이는 방법, 상태와 반응성을 통해 예측 가능한 UI를 만드는 원리를 알려준다. 또한 타입스크립트를 활용하여 런타임 오류를 사전에 방지하는 견고한 코드를 작성하는 노하우도 온라인 별책(PDF)으로 제공한다.

이 책은 리액트의 렌더링 과정과 가상 DOM의 작동 원리를 깊이 있게 분석하여 불필요한 렌더링을 줄이고 성능을 최적화하는 실질적인 방법을 제시함으로써, 독자들이 예상치 못한 버그를 방지하고 더 견고한 애플리케이션을 설계할 수 있도록 돕겠다.

[PART 1] 프론트엔드 개발 돌아보기

01장 프론트엔드 구성 요소와 발전 과정 돌아보기
__1.1 프론트엔드의 구성 요소와 발전 과정을 돌아봐야 하는 이유
__1.2 웹 개발과 프론트엔드가 차지하는 위상과 구성 요소
__1.3 초창기 웹 프론트엔드
__1.4 모듈의 탄생과 한계
__1.5 번들러의 탄생
__1.6 패키지 매니저의 도입
__1.7 템플릿 엔진의 도입
__1.8 명령형, 선언형 프로그래밍
____1.8.1 명령형 방식의 프론트엔드 개발
____1.8.2 선언형 방식의 프론트엔드 개발
학습 마무리 | 핵심 키워드 리마인드

02장 싱글 페이지 애플리케이션 돌아보기
__2.1 싱글 페이지 애플리케이션의 장점을 돌아봐야 하는 이유
__2.2 네트워크 호출 빈도
__2.3 성능 향상
__2.4 생산성 향상
____2.4.1 프론트엔드와 백엔드 개발 영역의 엄격한 분리
____2.4.2 선언형 프로그래밍을 사용한 빠른 프로토타입 구현
학습 마무리 | 핵심 키워드 리마인드

03장 UI 컴포넌트의 위상 돌아보기
__3.1 UI 컴포넌트의 위상을 돌아봐야 하는 이유
__3.2 프론트엔드 개발에서 UI 컴포넌트의 위상
__3.3 UI 컴포넌트의 추상화, 인터페이스, 캡슐화
__3.4 바닐라 자바스크립트로 컴포넌트 만들기
__3.5 웹 컴포넌트 API를 사용해 컴포넌트 만들기
__3.6 바닐라 자바스크립트 vs 웹 컴포넌트 API를 사용한 컴포넌트 비교
학습 마무리 | 핵심 키워드 리마인드

04장 상태와 반응성 돌아보기
__4.1 상태와 반응성을 돌아봐야 하는 이유
__4.2 상태와 설계 컴포넌트
____4.2.1 UI, 인터랙션을 담당하는 뷰(VIEW)
____4.2.2 데이터를 담당하는 모델
____4.2.3 모델과 뷰를 이어주는 중재자
__4.3 주요 디자인 패턴을 사용한 반응성 구현
____4.3.1 비 반응성 MVC 패턴 중재자 만들기
____4.3.2 MVC 패턴에 반응성 주입하기
__4.4 관찰자 패턴 알아보기
__4.5 MVVM 패턴과 반응성
____4.5.1 양방향 바인딩과 단방향 바인딩
____4.5.2 MVVM 패턴을 적용한 할 일 리스트 작성하기
____4.5.3 바인더 알아보기
____4.5.4 바인더 작성하기
학습 마무리 | 핵심 키워드 리마인드

05장 프론트엔드 구성 요소와 발전 과정 돌아보기
__5.1 개발 환경을 돌아봐야 하는 이유
__5.2 Node.js와 버전 매니저
____5.2.1 Node.js 구조와 원리
____5.2.2 노드 버전 매니저
__5.3 패키지 매니저
____5.3.1 패키지 매니저 비교
__5.4 모노레포
____5.4.1 모노레포와 모노레포 도구의 장점
__5.5 코드 퀄리티와 코드 포매팅
____5.5.1 린터
____5.5.2 포매터
____5.5.3 코드 정적 분석기
__5.6 리액트 개발 도구
____5.6.1 리액트 데브툴즈
____5.6.2 리액트 스캔
__5.7 리액트 개발 환경과 빌드 도구
____5.7.1 비트
____5.7.2 Rsbuild
____5.7.3 리액트 라우터
학습 마무리 | 핵심 키워드 리마인드

[PART 2] 리액트 핵심 요소 깊게 돌아보기

06장 JSX 구성 요소 돌아보기
__6.1 당신이 JSX를 공부해야 하는 이유
__6.2 DSL과 JSX 알아보기
__6.3 JSX를 구성하는 요소
____6.3.1 JSXElements
____6.3.2 JSXAttributes
____6.3.3 JSXChildren
____6.3.4 JSX Strings
학습 마무리 | 핵심 키워드 리마인드

07장 JSX 핵심 문법과 자바스크립트 변환 돌아보기
__7.1 JSX 핵심 문법과 자바스크립트 변환을 돌아봐야 하는 이유
__7.2 JSX 변환하기
____7.2.1 자동 런타임이란
____7.2.2 바벨로 JSX 변환해보기
____7.2.3 SWC로 JSX 변환해보기
____7.2.4 ESBuild로 JSX 변환해보기
____7.2.5 React.createElement와 리액트 엘리먼트 그리고 가상 DOM
__7.3 JSX의 핵심 문법 돌아보기
____7.3.1 템플릿 리터럴과 태그드 템플릿 돌아보기
____7.3.2 JSX VS 템플릿 리터럴
____7.3.3 합성 이벤트
____7.3.4 단일 루트 엘리먼트
____7.3.5 삼항 연산자와 &&
학습 마무리 | 핵심 키워드 리마인드

08장 리액트 재조정과 키 프롭스 돌아보기
__8.1 당신이 렌더링과 가상 DOM을 돌아봐야 하는 이유
__8.2 리액트 컴포넌트와 인스턴스
__8.3 렌더링과 리렌더링
__8.4 재조정 과정
__8.5 얕은 비교와 렌더링 최적화
__8.6 키(key) 프롭스와 리스트 렌더링
__8.7 키(key) 프롭스와 메모이제이션
학습 마무리 | 핵심 키워드 리마인드

09장 리액트 렌더링 규칙 돌아보기
__9.1 당신이 리액트 렌더링 규칙을 돌아봐야 하는 이유
__9.2 렌더링 조건
____9.2.1 애플리케이션이 처음 로드될 때
____9.2.2 컴포넌트 내부 상탯값의 변경으로 인한 리렌더링
____9.2.3 부모 컴포넌트가 리렌더링되었을 때
____9.2.4 컨텍스트의 값이 변경되었을 때
__9.3 리렌더링에 대한 오해
____9.3.1 자식 컴포넌트와 props.children
____9.3.2 컴포넌트에 전달되는 프롭스값이 변경되었을 때?
__9.4 리액트 렌더링 규칙
____9.4.1 부수 효과 제거와 멱등성 보장
____9.4.2 리액트 렌더링 규칙 - JSX로 전달된 값의 불변성을 유지
학습 마무리 | 핵심 키워드 리마인드

10장 리액트의 프롭스와 컴포넌트 패턴 돌아보기
__10.1 당신이 리액트의 프롭스와 컴포넌트 패턴을 돌아봐야 하는 이유
__10.2 리액트의 프롭스와 상태 개념
____10.2.1 리액트의 프롭스와 상태
____10.2.2 프롭스의 불변성
____10.2.3 프롭스와 속성
__10.3 프롭스 자료형 검증
____10.3.1 런타임 검증을 위한 prop-types 라이브러리
____10.3.2 컴파일 타임 검증을 위한 타입스크립트
__10.4 프롭스를 사용하는 컴포넌트 패턴
____10.4.1 컴포넌트 합성과 상속, 그리고 고차 컴포넌트
____10.4.2 중첩 컴포넌트와 children, 프롭스 드릴링
____10.4.3 렌더 프롭스 패턴
____10.4.4 슬롯 프롭스 패턴
____10.4.5 컴파운드 컴포넌트 패턴
____10.4.6 명시적 슬롯 패턴 - slot type RFC
학습 마무리 | 핵심 키워드 리마인드

11장 리액트의 상태와 배칭 돌아보기
__11.1 당신이 리액트의 상태와 배칭을 돌아봐야 하는 이유
__11.2 리액트의 상태 정의와 종류
____11.2.1 지역 상태와 파생 상태
____11.2.2 상태와 스냅샷
____11.2.3 상태의 불변성
____11.2.4 상태 끌어올리기
__11.3 컴포넌트 간의 데이터 흐름 돌아보기
____11.3.1 단방향 데이터 흐름과 단방향 바인딩
____11.3.2 양방향 데이터 흐름과 양방향 바인딩
__11.4 리액트 배칭 돌아보기
____11.4.1 배칭의 개념과 필요성
____11.4. 2 비동기 동작에서의 배칭 프로세스
____11.4.3 react-dom의 flushSync( )
학습 마무리 | 핵심 키워드 리마인드

12장 리액트를 구성하는 뿌리, 파이버 돌아보기
__12.1 당신이 리액트 파이버를 돌아봐야 하는 이유
__12.2 리액트 스택 재조정자 알아보기
____12.2.1 스택 재조정자 동작 원리
____12.2.2 스택 재조정자의 한계
__12.3 파이버 아키텍처 알아보기
____12.3.1 파이버 노드 해부하기
____12.3.2 파이버 우선순위와 레인(Lanes) 모델
____12.3.3 파이버 트리 구조 : 재귀 없는 순회
____12.3.4 더블 버퍼링과 얼터네이트 포인터
____12.3.5 파이버 아키텍처와 동시성 기능 원리
학습 마무리 | 핵심 키워드 리마인드

[PART 3] 리액트 훅 사용법 깊게 돌아보기

13장 리액트 훅의 사용 규칙 돌아보기
__13.1 당신이 리액트 훅을 돌아봐야 하는 이유
__13.2 왜 훅이라고 부를까?
__13.3 클래스 컴포넌트에서 함수형 컴포넌트로
____13.3.1 this 키워드의 혼란과 수동 바인딩의 번거로움
____13.3.2 고차 컴포넌트와 래퍼 지옥
____13.3.3 커스텀 훅을 사용한 로직 재사용
__13.4 리액트 훅 사용 규칙
____13.4.1 훅은 최상위에서만 호출해야 한다
____13.4.2 오직 리액트 함수 내에서만 훅을 호출해야 한다
____13.4.3 훅의 인수는 불변성을 가지고 있어야 한다
학습 마무리 | 핵심 키워드 리마인드

14장 리액트 필수 훅 돌아보기
__14.1 당신이 리액트 필수 훅을 돌아봐야 하는 이유
__14.2 useState( ) : 리액트 상태 관리의 시작과 핵심
____14.2.1 상태 초기화와 지연 초기화
____14.2.2 상태 업데이트와 업데이트 함수
____14.2.3 업데이트 함수와 클로저
__14.3 useEffect( ) : 컴포넌트를 외부 세계와 동기화하기
____14.3.1 useEffect( ) 사용법과 의존성 배열 돌아보기
____14.3.2 부수 효과의 뒷정리 : useEffect( )의 클린업 함수
____14.3.3 부수 효과 다루기 : 외부 시스템과 동기화
____14.3.4 엄격 모드에서의 useEffect( )
__14.4 useRef( ) : 렌더링을 넘어 값을 기억하는 법
____14.4.1 리렌더링을 발생시키지 않는 useRef( )
____14.4.2 useRef( )를 사용한 DOM 요소 직접 접근
____14.4.3 forwardRef( ) : 부모가 자식의 DOM에 접근하는 방법
____14.4.4 리액트 19버전에서의 forwardRef( )
__14.5 useReducer( )와 리액트 포탈
____14.5.1 useReducer( ) 알아보기
____14.5.2 createPortal( )로 모달 컴포넌트 만들기
학습 마무리 | 핵심 키워드 리마인드

15장 리액트 메모이제이션 돌아보기
__15.1 당신이 리액트 메모이제이션을 돌아봐야 하는 이유
__15.2 memo( )를 사용한 렌더링 최적화
____15.2.1 memo( ) 사용법
____15.2.2 성급한 최적화의 함정
____15.2.3 중첩 구조와 children 프롭스의 함정
__15.3 useMemo( ) : 값 메모이제이션
____15.3.1 useMemo( ) 내부 동작 들여다보기
____15.3.2 useMemo( )를 활용한 연산 최적화 예제
__15.4 useCallback( ) : 함수 메모이제이션
____15.4.1 useCallback( )으로 커스텀 훅에 안정적인 콜백 전달하기
____15.4.2 useCallback( )으로 프롭스 메모이제이션하기
____15.4.3 useCallback( ) 활용 : 디바운스 올바르게 동작하게 하기
__15.5 리액트 컴파일러를 이용한 자동 메모이제이션
____15.5.1 수동 메모이제이션의 한계
____15.5.2 컴파일러 개발의 역사
____15.5.3 리액트 컴파일러의 역할과 기능
____15.5.4 리액트 컴파일러의 원리 및 동작 방식
____15.5.5 리액트 컴파일러의 수동 메모이제이션 대체 가능 여부
____15.5.6 리액트 컴파일러 사용해보기
학습 마무리 | 핵심 키워드 리마인드

16장 리액트 컨텍스트와 에러 바운더리, 그리고 서스펜스 돌아보기
__16.1 당신이 리액트 컨텍스트, 에러 바운더리, 서스펜스를 돌아봐야 하는 이유
__16.2 에러 바운더리 사용해 견고한 앱 만들기
____16.2.1 클래스 컴포넌트를 사용해 에러 바운더리 컴포넌트 만들어보기
____16.2.2 에러 전파 알아보기
____16.2.3 렌더링 에러와 에러 바운더리 작동 조건
__16.3 컨텍스트 API를 사용한 효과적인 상태 공유
____16.3.1 프롭스 드릴링이란?
____16.3.2 컨텍스트 생성하기
__16.4 컨텍스트 API의 유스케이스
____16.4.1 중간 컴포넌트 계층이 생기고 렌더 프롭스 패턴을 중첩으로 사용할 때
____16.4.2 컨텍스트 API 사용해 개선하기
__16.5 컨텍스트 API와 리렌더링
____16.5.1 컨텍스트 제공자의 value 프롭스 메모이제이션
____16.5.2 컨텍스트 분리해서 리렌더링 영향 범위 줄이기
____16.5.3 셀렉터 패턴 사용해 최적화하기
____16.5.4 고차 컴포넌트와 memo( ) 활용하기
__16.6 서스펜스 사용해 컴포넌트 내 비동기 작업 수행하기
____16.6.1 서스펜스의 역사와 발전
____16.6.2 에러 바운더리와 서스펜스
____16.6.3 서스펜스 내부 구현과 작동 원리
__16.7 use( ) 사용해 컨텍스트와 프로미스 읽기
____16.7.1 컨텍스트값 읽기
____16.7.2 프로미스 결과 풀어내기
____16.7.3 use( )는 어떻게 조건문 안에서 호출될 수 있을까?
학습 마무리 | 핵심 키워드 리마인드

17장 리액트 동시성 기능과 심화 훅 돌아보기
__17.1 당신이 리액트 동시성 기능과 심화 훅을 돌아봐야 하는 이유
__17.2 useLayoutEffect( )와 useInsertionEffect( ) 사용 사례
____17.2.1 useEffect( )와 useLayoutEffect( )의 차이점
____17.2.2 리액트 헬멧과 useInsertionEffect( )
____17.2.3 리액트 19버전의 메타 데이터와 스타일시트
__17.3 useImperativeHandle( )을 사용한 제어 역전
__17.4 동시성 기능과 트랜지션
____17.4.1 useTransition( ) 사용하여 우선순위 낮은 작업 선정하기
____17.4.2 useDeferredValue( ) 사용하여 지연된 상탯값 사용하기
____17.4.3 startTransition( )과 비동기 함수
__17.5 useSyncExternalStore( )를 사용한 외부 상태 동기화
____17.5.1 내부 상태와 외부 상태
____17.5.2 useSyncExternalStore( )과 티어링
학습 마무리 | 핵심 키워드 리마인드

[PART 4] 리액트를 둘러싸는 기술과 미래

18장 리액트 렌더링 패턴 돌아보기
__18.1 당신이 리액트 렌더링 패턴을 돌아봐야 하는 이유
__18.2 클라이언트 사이드 렌더링과 SSR 돌아보기
____18.2.1 클라이언트 사이드 렌더링 알아보기
____18.2.2 서버 사이드 렌더링 알아보기
____18.2.3 서버 사이드 렌더링의 동형성과 수화 과정
____18.2.4 번들 크기 분석과 next.config
__18.3 서버 사이드 렌더링을 위한 리액트 API
____18.3.1 renderToString( ) 알아보기
____18.3.2 renderToNodeStream( )과 스트리밍
____18.3.3 renderToPipeableStream( )과 스트리밍 렌더링
__18.4 정적 사이트 생성과 증분 정적 재생성 돌아보기
____18.4.1 Next.js 환경에서 정적 사이트 생성 사용해보기
____18.4.2 증분 정적 재생성 추가해보기
__18.5 리액트 서버 컴포넌트 알아보기
____18.5.1 서버 컴포넌트의 개념과 특징 알아보기
____18.5.2 클라이언트 컴포넌트란?
____18.5.3 리액트 서버 컴포넌트 규칙
학습 마무리 | 핵심 키워드 리마인드

19장 Next.js 앱 라우터와 서버 액션, 그리고 새로운 리액트 훅 돌아보기
__19.1 당신이 Next.js 앱 라우터와 서버 액션, 그리고 새로운 리액트 훅을 돌아봐야 하는 이유
__19.2 Next.js 앱 라우터 기본 사용법
____19.2.1 앱 라우터의 라우팅과 규칙
____19.2.2 특수 파일과 컴포넌트 계층 구조
____19.2.3 중첩 라우팅과 레이아웃
__19.3 정적 렌더링과 동적 렌더링, 캐싱
____19.3.1 동적 라우트에 대한 정적 렌더링과 동적 렌더링
____19.3.2 정적 라우트에 대한 동적 렌더링
____19.3.3 풀 라우트 캐시 알아보기
____19.3.4 라우터 캐시 알아보기
____19.3.5 요청 메모이제이션과 React.cache( )
____19.3.6 데이터 캐시와 fetch( )
____19.3.7 라우트 핸들러 사용해 클라이언트에게 API 제공하기
__19.4 서버 함수와 서버 액션 사용해보기
____19.4.1 서버 함수와 서버 액션 알아보기
____19.4.2 서버 액션 동작 원리
__19.5 액션과 함께 사용하는 리액트 19버전 훅
____19.5.1 액션과 서버 액션의 관계
____19.5.2 useActionState( )과 트랜지션 사용하기
____19.5.3 useOptimistic( )으로 낙관적 업데이트 구현하기
____19.5.4 useFormStatus( )로 폼 상태 확인하기
학습 마무리 | 핵심 키워드 리마인드