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

한빛출판네트워크

러닝 리액트(2판)

최적의 리액트 코드를 작성하기 위한 모범 사례와 패턴

한빛미디어

번역서

판매중

  • 저자 : 알렉스 뱅크스 , 이브 포셀로
  • 번역 : 오현석
  • 출간 : 2021-07-01
  • 페이지 : 396 쪽
  • ISBN : 9791162244494
  • 물류코드 :10449
  • 구판정보 :이 도서는 <러닝 리액트>의 개정판입니다. 구판 정보 보기
  • 초급 초중급 중급 중고급 고급
4.6점 (32명)
좋아요 : 5

효율적인 리액트 애플리케이션 작성법을 간결하고 쉽고 빠르게 배우기

 

브라우저에서 작동하는 자바스크립트, CSS, HTML을 아는 웹 개발자나 소프트웨어 엔지니어에게 이상적인 이 책은 최신 리액트 코드를 작성하기 위한 모범 사례와 패턴을 소개한다. 리액트나 함수형 자바스크립트에 대한 지식이 없는 입문자도 이 책을 통해 리액트를 제대로 쓰는 법을 배울 수 있다.

이 책은 대규모 데이터 기반 웹사이트에서 페이지를 다시 요청하지 않고도 데이터 변화에 따라 화면을 교묘하게 변경하는 UI 제작법을 학습 로드맵에 맞춰 차근차근 설명한다. 그 과정에서 함수형 프로그래밍과 최신 ECMAScript 기능을 다양한 예제와 함께 안내한다.

 

 

추천사

 

프런트엔드 커뮤니티에서 볼 수 없었던 책이다. 알렉스와 이브는 리액트를 깊이 설명할 뿐 아니라 자바스크립트 기본 개념과 테스트, 상태 관리 등의 내용도 다룬다. 게다가 유머를 섞어서 알기 쉽게 설명한다. 이 책을 아무리 권장해도 충분하지 않다. 

_에마 보스티언, 스포티파이 소프트웨어 엔지니어

알렉스 뱅크스 저자

알렉스 뱅크스

캘리포니아 교육과정 개발 업체 Moon Highway의 소프트웨어 엔지니어이자 강사며 공동설립자다. 소프트웨어 컨설턴트로서 MSN, 시카고 마라톤, 미국 에너지부(DOE) 등을 위한 애플리케이션을 개발했다. 야후의 신입 사원을 위한 커리큘럼 개발을 지속적으로 도왔으며, 온라인 교육사이트 린다닷컴(Lynda.com)에 몇몇 수업을 개설했다. LinkedIn Learning과 egghead.io의 교육과정을 개발했고, 콘퍼런스에서 자주 발표하며, 전 세계에서 기술 워크숍을 통해 엔지니어들을 지도하고 있다.

 

이브 포셀로 저자

이브 포셀로

캘리포니아 교육과정 개발 업체 Moon Highway의 소프트웨어 아키텍트이자 공동설립자다. 마이크로소프트와 1-800-Dentist를 위한 소프트웨어 프로젝트에 몸담기도 했다. 활동적인 강사이자 저술가로 스탠퍼드 대학교, 페이팔, 이베이, 린다닷컴 등에서 자바스크립트와 파이썬을 강의했다. LinkedIn Learning과 egghead.io의 교육과정을 개발했고, 콘퍼런스에서 자주 발표하며, 전 세계에서 기술 워크숍을 통해 엔지니어들을 지도하고 있다.

오현석 역자

오현석

모빌리티42 이사로 일하면서 매일 고객의 요청에 따라 코드를 만드는 현업 개발자다. 어릴 때 처음 접한 컴퓨터에 매료된 후 경기과학고등학교, KAIST 전산학 학사와 프로그래밍 언어 전공 석사를 취득하며 계속 컴퓨터를 사용했다. 직장에서는 주로 코틀린이나 자바를 사용한 서버 프로그래밍을 하고, 주말이나 빈 시간에는 번역을 하거나 공부하면서 즐거움을 찾는다. 『코어 파이썬 애플리케이션 프로그래밍』(에이콘, 2014)을 시작으로 『배워서 바로 쓰는 스프링 프레임워크』(2020), 『러닝 리액트(2판)』(2021), 『고성능 파이썬(2판)』(이상 한빛미디어, 2021) 등 30권 이상의 책을 번역했다.

 

 

CHAPTER 1 리액트 소개

1.1 튼튼한 토대

1.2 리액트의 과거와 미래

1.3 코드 예제 사용법

 

CHAPTER 2 리액트를 위한 자바스크립트

2.1 변수 선언하기

2.2 함수 만들기

2.3 자바스크립트 컴파일하기

2.4 객체와 배열

2.5 비동기 자바스크립트

2.6 클래스

2.7 ES6 모듈

 

CHAPTER 3 자바스크립트를 활용한 함수형 프로그래밍

3.1 함수형이란 무엇인가?

3.2 명령형 프로그래밍과 선언적 프로그래밍 비교

3.3 함수형 프로그래밍의 개념

 

CHAPTER 4 리액트의 작동 원리

4.1 페이지 설정

4.2 리액트 엘리먼트

4.3 ReactDOM

4.4 리액트 컴포넌트

 

CHAPTER 5 JSX를 사용하는 리액트

5.1 JSX로 리액트 엘리먼트 정의하기

5.2 바벨

5.3 JSX로 작성한 조리법

5.4 리액트 프래그먼트

5.5 웹팩 소개

 

CHAPTER 6 리액트 상태 관리

6.1 별점 컴포넌트 만들기

6.2 useState 훅

6.3 재사용성을 높이기 위한 리팩터링

6.4 컴포넌트 트리 안의 상태

6.5 폼 만들기

6.6 리액트 콘텍스트


CHAPTER 7 훅스로 컴포넌트 개선하기

7.1 useEffect 소개

 

CHAPTER 8 데이터 포함시키기

8.1 데이터 요청하기

8.2 렌더 프롭

8.3 가상화된 리스트

8.4 GraphQL 소개

 

CHAPTER 9 Suspense

9.1 오류 경계

9.2 코드 분리하기

 

CHAPTER 10 리액트 테스트

10.2 프리티어.10.3 리액트 애플리케이션을 위한 타입 검사

10.4 테스트 주도 개발

10.5 제스트 사용하기

10.6 리액트 컴포넌트 테스트하기

 

CHAPTER 11 리액트 라우터

11.1 라우터 사용하기

11.2 라우터 프로퍼티

11.3 리디렉션 사용하기

 

CHAPTER 12 리액트와 서버

12.1 아이소모피즘과 유니버설리즘 비교

12.2 서버 렌더링 리액트

12.3 넥스트.js를 사용한 서버 렌더링

12.4 개츠비

12.5 리액트의 미래

리액트로 효율적인 웹 UI를 구축하려는 개발자를 위한 본격 입문서 

 

이 책은 최신 자바스크립트의 핵심과 함수형 프로그래밍을 소개함으로써 리액트 프로그래밍에 필요한 기초를 다져주며, 리액트 JSX와 렌더링 방식, 함수 컴포넌트를 만들고 합성하는 방법에 대해 소개한다. 다양한 훅을 사용하고 정의하는 방법과 비동기 데이터 처리에 대해 설명한 후, 테스트, 라우팅과 서버사이드 렌더링에 이르기까지 실무에서 리액트를 개발할 때 필요한 기본 지식을 적절한 예제와 함께 잘 설명해준다.

리액트를 사용하면 UI 컴포넌트를 정의하고 정의한 컴포넌트를 선언적으로 활용해 UI를 구축하고 제어할 수 있다. 리액트 라이브러리 자체는 비교적 간단한 UI 라이브러리라고 할 수 있지만, 리액트를 뒷받침하는 합성성과 관심사 분리, 데이터 흐름 방향의 단순화 등의 아이디어는 UI뿐 아니라 다양한 응용 분야에서도 활용할 수 있어 유용하다. 이 책을 통해 리액트의 핵심 요소를 잘 이해하면 리액트 공식 문서나 더 자세하고 복잡한 리액트 책을 더 쉽게 이해하고 자신의 프로젝트에 리액트를 더 잘 응용할 수 있다.

 

 

▶ 사전 지식

  • 자바스크립트 초급

 

▶ 먼저 보면 좋은 책

  • 『모던 자바스크립트 핵심 가이드』
  • 『혼자 공부하는 자바스크립트』
  • 『자바스크립트를 말하다』

  

대상 독자

주요 독자는 최신 자바스크립트와 함수형 프로그래밍 개념을 익히고 이를 바탕으로 리액트 개념을 잘 이해함으로써 리액트에 입문하고 싶은 개발자다. 이 책은 여러분이 원하는 목표를 리액트로 성취할 수 있도록 도와줄 것이다.

 

 

주요 내용 

  • 자바스크립트를 사용해 함수형 프로그래밍의 핵심 개념
  • 리액트가 브라우저에서 어떻게 작동하는지 내부 살펴보기
  • 리액트 컴포넌트를 사용해 애플리케이션의 프리젠테이션 계층 만들기
  • 데이터를 관리하는 방법과 애플리케이션 버그 수정 시간을 줄이는 방법
  • 리액트 훅을 통해 상태를 관리하고 데이터를 외부에서 읽어오는 방법
  • 단일 페이지 애플리케이션(SPA)에서 라우팅 해법 사용하기
  • 서버를 염두에 둔 아이소모픽 리액트 애플리케이션의 구조를 잡는 방법

검수를 한건지 안한건지 오탈자 투성이...

제가 여태 사본 책 중에 최악이네요.

 

 

한빛미디어의 러닝리액트 2을 소개합니다.

 

learningReact2ed_001.png

 

 

프론트엔드나 리액트에 나름의 내공을 가지고 도서를 학습했던 것은 아니고, 프로젝트모바일앱 개발을 vue.js 템플릿앱 기반으로 만들어야 했기 때문에 뷰를 먼저 접하게 되었습니다. 그러다보니 자연스레 리액트에도 관심을 가지게 되었죠. 오랜 기간동안 프론트엔드 개발에 경험이 있는 것이 아니기 때문에 해당 영역에 통찰력을 가지고 있지는 않겠지만, 리액트와뷰의 가장 큰 차이로 라이브러리이냐, 프레임워크이냐 라는 차이일 것이고, 이로 인한 자유도 차이가 있을 것입니다. 뷰는 프레임워크 기반이니뷰 문법 안에서 사용해야 하는데 반해, 리액트는 라이브러리 기반이기 때문에 부분적으로 사용이 가능하다는것이 있고, 자바스크립트 문법 기반으로 자유로운 개발이 가능하다고 기억하고 있고, 이 정도 지식으로 독서를 했습니다.

 

책의 구성

책은 12개의 장으로 구성되어 있습니다. 도서 초반을 읽다 보면 아래와 같은 내용이 언급되어 있는데,

 

learningReact2ed_002.png

 

 

이로 인해서 러닝 리액트 개정판은 내용 구성 상 이전 1판과는 리덕스에대한 차이가 있습니다. 리덕스 기반의 상태 관리 대신에 hooks 기반으로내용이 작성되어 있다는 점입니다.

  • CHAPTER 2 리액트를 위한 자바스크립트
  • CHAPTER 3 자바스크립트를 활용한 함수형 프로그래밍
  • CHAPTER 4 리액트의 작동 원리
  • CHAPTER 5 JSX를 사용하는 리액트
  • CHAPTER 6 리액트 상태 관리
  • CHAPTER 7 훅스로 컴포넌트 개선하기
  • CHAPTER 8 데이터 포함시키기
  • CHAPTER 9 Suspense
  • CHAPTER 10 리액트 테스트
  • CHAPTER 11 리액트 라우터
  • CHAPTER 12 리액트와 서버

 

3장까지는 자바스크립트와 ES6 문법, 함수형 프로그래밍을 소개하는 것을 두어 리액트 프로그래밍 이전에 기초 JS 문법으로부터시작합니다. 이는 역자 서문에 독자 타겟을 서술하고 있는데, 적어도본인과 같은 프론트엔드 입문자가 접해도 무리없도록 배려하는 것으로 보입니다.

 

learningReact2ed_003.png

 

 

4장과 5장은부터는 리액트 컴포넌트와 JSX로 리액트 기초를, 6장과 7장은프로퍼티와 리액트 상태 관리를 다루고 있습니다. 함수 컴포넌트와 합성,그리고 훅과 비동기 데이터 처리에 대한 설명이 이어집니다. 11장과 12장에서 리액트 라우터와 리디렉션으로 내용 구성으로 마무리 합니다.

 

내용을 크게 세 부분으로 나누면 1) 3장까지는 자바 스크립트에 대한 기초적인 내용을 다루기때문에 기본적으로 자바스크립트에 대한 이해도는 필요합니다. 2) 4장부터 7장까지는 리액트에 대해서 본격적으로 배우면서 리액트의 동작 원리를 알 수 있고, 이어지는 8장에 fetch json으로 실제 데이터 처리하는 것을 배울 수 있습니다. 3) 마지막으로리액트 테스트와 라우터는 심화에 해당하는 내용으로 볼 수 있습니다리액트 입문자에게는 구성 자체가 너무나도 좋습니다. 만일 관련해서 리액트 입문 교육 과정을만든다면 같은 내용 구성과 flow를 따른다면 좋은 내용이 될 수 있다고 생각합니다. 처음에 입문용으로는 아쉬운 두께와 크기가 아닌가 생각이 들었지만, 리액트의핵심을 독자에게 전달하고자 하는 것이 작가의 의도라 잠작이 됩니다.

 

마무리를 하자면

리액트 입문자가 읽기에 무리가 없는 서술 방향을 확인할 수 있었습니다. 도서는 얇지만 리액트와리액트의 최신 동향에 대한 핵심적인 내용은 충실히 담고 있습니다. 개인적인 선호라고 하면 입문도서는핵심을 담은 얇은 도서를 선호합니다. 핵심을 파악하고 파고 들어야겠다는 마음이 생기면 그때 필요한 내용을두루두루 갖춘 도서로 학습이 이어지면 된다고 생각하기 때문입니다.

다만 이점은 입문 도서에 대해서 A-to-Z를 선호하시는 분께는 그런방대한 내용을 담고 있지는 않기 때문에 방향이 다를 수 있습니다. 따라서 다른 분은 예제가 생각보다많지 않다고 생각할 수 있습니다. 도서마다 작가의 의도와 서술 방향이 서로 다를터인데, 어떤 도서에서는 예제나 프로젝트 비중을 많이 가진 도서들이 분명 있기 때문입니다. 그래서 다른 한편으로는 실무 예제나 프로젝트 비중이 작다고 느끼실 수 있습니다.

 

"한빛미디어 <나는리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

 



책의 초반부는 자바스크립트에 대한 간단한 소개와 명령형/선언형/함수형 프로그래밍들을 소개해준다.

JS에 대한 간단한 소개만 있으므로 JS를 모르는 상태로 이 책을 접근하게 되면 조금 어려울 수 있을것 같다.

 

 

4장부터 리액트의 작동 원리가 나오는데, React의 렌더 과정이나 돔이 구성되는 과정을 간략히 보여준다.

특히 VirtualDOM 관련해서 구성되는 리터럴과각 필드 타입에 대한 설명이 좋았었다.

 

 

 

 

그 후 createElement에서 JSX로 넘어가며 왜 JSX가 탄생하게 되었는지에 대한 설명도 재밌게 읽었다.

 

 

훅스에 대한 설명은 굉장히 친절했는데, 함수형을 전혀 모르는 초심자가 보아도 이해할수 있을거라 예상된다.

 

각 훅스들이 왜 사용되고 어떻게 사용해야 하는지 예제들이 명확해서 읽기에 편했다.

 

 

 

 

JSX-훅스-데이터-fetch 로 이어지는 구성이 굉장히 좋았다고 느꼈다.

 

책의 후반부에서는 Suspense를 설명하며 여러 부가 옵션들을 설명해준다.

 

컴포넌트 에러체크와 함께 왜 필요한지에 대해서 꾸준히 설명해준다.

 

또한 TDD 등에 대한 테스팅에 대한 짧은 설명이 있다.

 

테스트에 대한 더 상세한 설명이 있었으면 좋았겠지만 리액트 자체에 초점을 두었다고 생각했을 때에는 좋은 구성이었던것 같다.

 

리액트를 시작하려는 분들에게 추천하고 싶은 책이다.



이야기에 앞서 필자는 러닝 리액트 1판을 본 적은 없습니다.

Velopert의 리액트를 다루는 기술 개정판만 본 적이 있습니다.


리액트 네이티브를 제외하더라도 리액트 관련 책이 어느덧 스샷 하나에는 다 안담길 정도로 많이 나왔습니다.

제가 처음 리액트를 접할 때만 하더라도 리액트를 다루는 기술 정도만 있었는데 말입니다.

저 많은 책들을 일일이 본것은 아니지만 러닝 리액트 2판은 굉장히 흥미로웠습니다.

먼저 여타 입문서와 비슷하게 ES6이상의 자바스크립트에 대한 설명은 같았습니다.

그런데 개인적으로 괜찮았던 부분이 함수형 프로그래밍에 대한 부분입니다.

자바스크립트 책들에는 자주 나오는 내용이지만 리액트에서 모던 자바스크립트 외에 함수형을 설명하는 책은 처음 본 것 같습니다.

중요한 내용이기 때문에 함수형을 잘 모르지만 이 책으로 처음 리액트를 접하는 분이시라면 많은 도움이 될 것이라고 생각합니다.

그리고 여타 입문서와 같이 개념, 원리, 사용법 등으로 진행되는데 챕터 구성 순서가 괜찮았습니다.

또 괜찮았던 부분은 TDD에 대한 부분도 간단하게 나마 설명과 실습이 진행되어 좋았습니다.

그러나.. 뭐 당연히 리액트 책이기 때문에 리액트에 초점이 맞추어지는 게 맞겠지만 SSR과 Next.js에 대한 설명은 너무 간단한 것 같아 아쉬웠습니다. 

그런데 사실 이 부분은 이런게 있다는 정도만 설명해주고 스스로 찾아서 다른 책이나 자료로 공부하는 게 맞는 거 같기도 합니다.

Next.js는 실제로 공식 문서와 튜토리얼만 해도 이해가 어느 정도 잘 되는 편이니 말입니다.


 

결론

부제는 솔직하게 잘 모르겠지만 입문서로써 기본과 앞으로 찾아서 공부해야할 키워드들을 제대로 가르쳐주는 기본 책이라고 생각합니다.


 


 

  "한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

왜 이 내용이 있어야 하는가? 그리고 오탈자가 꽤 있기는 하지만. 리액트의 기본에 정말 충실한 책이다.

예전에 리액트에 대해 좀 찾아봤을 때에는 클래스로 컴포넌트를 생성하는 방식이었는데, 최근에는 함수형으로 방향이 바뀐 것 같다.

책에서는 함수형 개발 위주로 설명을 해주고, 그럴싸한 결과물을 만들어 나가는 (클론코딩) 위주보다는 작은 코드들을 사용하여 기능 위주로 설명을 해주고 있어 이해가 좀 더 잘 되었다.

리액트의 기본. 에 대한 학습용으로는 괜찮은 책이라 생각한다.

한빛미디어에서 <나는 리뷰어다>를 통해 책을 지원받아 작성한 리뷰입니다.

러닝 리액트 1판은 2018년도 자주 쓰이는 자바스크립트 앱 개발 라이브러리라며, 20217월에 나온 러닝 리액트 2판은 자바스크립트 앱 개발에 대표적으로 쓰인 라이브러리를 담고 있습니다.

 

이번 저서의 가장 큰 장점은 짧고 간결하게 리액트의 정수를 소개하고 있다는 점입니다. 이뿐만 아니라 자바스크립트의 핵심을 설명하고 자바스크립트 함수형 프로그래밍에 대한 소개, 리액트 프로그래밍 필요한 기초, 리액트 JSX와 렌더링 방식, 함수 컴포넌트를 만들고 합성하는 방법 등 전체적인 내용을 알려줍니다.

 

자바스크립트와 함수형 프로그래밍 개념을 익히고 그를 바탕으로 리액트 개념을 이해함으로써 리액트에 입문하고 싶은 개발자들에게 꼭 필요한 내용을 전달하고 있는데요. 리액트 기초를 배우고 싶어 하는 개발자들에 추천하고 싶습니다. 최신 자바스크립트의 핵심과 함수형 프로그래밍을 소개하며 리액트 프로그래밍에 필요한 기초를 다져주는 효율적이 입문서입니다.

 

러닝 리액트 2판은 12개의 챕터로 구성되어 있는데요. 리액트의 과거와 미래 소개부터 리액트를 위한 자바스크립트에 관한 내용으로 이루어지고 있습니다. 이후부터 본격적인 리액트에 대한 내용을 다루고 있습니다. 리액트의 작동 원리, JSX, 상태관리, 혹스, 데이터 관리, Suspense, 테스트, 라우팅, SSR 등이 있습니다. 이 저서를 활용해 리액트를 숙달하는 건 어렵지만, 리액트를 활용하는 데 갖춰야 할 기본 지식을 습득하기엔 좋은 저서입니다.

 

자바스크립트 및 ES에 대한 기초적인 이해를 전제하고 내용을 설명하며, 리액트라는 프레임워크가 브라우저 내에서 어떤 과정을 거쳐 작동하는지까지 철저하게 다루고 있습니다. 최신 리액트 코드를 작성하기 위한 모범 사례와 패턴을 소개합니다.

 

프레임워크인 만큼 작성한 코드에 대한 상태관리 패턴이나 테스트 방법 등을 철저하게 기술하고 있습니다. 리액트를 사용하면 UI 컴포넌트를 정의하고 정의한 컴포넌트를 선언적으로 활용해 UI를 구축하고 제어할 수 있는데요. 리액트 라이브러리 자체는 비교적 간단한 UI 라이브러리라고 할 수 있지만, 리액트를 뒷받침하는 합성성과 관심사 분리, 데이터 흐름 방향의 단순화 등의 아이디어는 UI뿐 아니라 다양한 응용 분야에서도 활용할 수 있어 유용합니다.

 

저서의 목표는 학습 로드맵, 즉 리액트 학습 과정을 제시함으로써 리액트를 배우는 과정에서 혼란을 최소하고 자바스크립를 아는 게 가장 먼저 할 일입니다. 자바스크립트 배열, 객체, 함수를 알고 익숙해지며 이번 저서를 활용해 리액트를 배우는 데 유용하게 써먹을 수 있습니다. 참고로 자바스크립트 저서로 모던 자바스크립트 핵심 가이드’, ‘혼자 공부하는 자바스크립트’,‘자바스크립트를 말하다를 추천합니다.

 

코드 예제 등 깃허브 저장소에서 살펴보시길 바랍니다.

https://github.com/MoonHighway/learning-react

 

한글판 깃허브 저장소도 있습니다.

https://github.com/enshahar/learning-react-kor/tree/seconded

 

 

 

한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다.”

회사에서 새로 리액트로 프로젝트를 시작하게 되었는데, 마침 리뷰 대상 도서에 리액트 관련 도서가 있어 바로 신청했습니다! 

주로 백엔드 위주의 업무를 진행해왔기 때문에, 리액트를 사용해본 적은 있었지만 제대로 공부해본 적이 없었는데, 기초적인 부분부터 공부할 수 있었습니다. 

또한, 중간중간 개념에 대한 코드가 간략하게 소개되어 있어 도움을 많이 받았습니다. 

책을 읽으면서 중요하게 다가왔던 부분들을 간략하게 추려보았습니다. 

 

 

리액트는 애플리케이션을 작성하는 데 필요한 모든 기능을 한꺼번에 제공하지는 않으며 그저 아주 작은 라이브러리다. 그러니 꼭 한번 단 5분만 리액트를 써보자. (15p) 무엇보다도 리액트는 자신을 라이브러리라고 소개한다. 

이 말은 리액트가 모든 유스케이스에 적합한 도구를 제공하지 않고 특정 기능만 구현해 제공하는 데 관심이 있다는 뜻이다. (17p) 

1장 리액트 소개

 

 

 

JSX는 자바스크립트 코드 안에서 바로 태그 기반의 구문을 써서 리액트 엘리먼트를 정의할 수 있게 해주는 자바스크립트 확장이다. (111p) ​ 

우리는 JSX와 함께 최신 자바스크립트 기능을 활용하고 싶기 때문에 우리가 작성한 멋진 소스코드를 브라우저가 해석할 수 있는 코드로 변환해줄 수단이 필요하다. 이런 변환 과정을 컴파일링이라고 부르며 바벨이 그런 일을 해준다. (114p) ​ 

웹팩은 모듈 번들러로 알려져있다. 모듈 번들러는 여러 다른 파일들(자바스크립트, CSS, JSX 등)을 받아서 한 파일로 묶어준다. 모듈을 하나로 묶어서 얻는 2가지 이익은 모듈성과 네트워크 성능이다. (126p) 

5장 JSX를 사용하는 리액트

 

 

 

다만 우리 바람은 여러분이 제어가 되는 컴포넌트가 여러번 재 렌더링된다는 사실을 기억하고 이 컴포넌트 안에 오랜 시간이 걸리는 비용이 많이 드는 처리를 추가하지 말라는 것이다. 적어도 여러분이 리액트 컴포넌트를 최적화할 경우 방금 설명한 지식이 도움이 될 것이다. (168p)

6장 리액트 상태 관리

 

 

 

인터넷에서 데이터를 적재하는 처리는 비동기 작업이다. 데이터를 요청하면 응답이 배달되기까지 시간이 약간 걸리고, 중간에 무언가 잘못될 수도 있다. 리액트 컴포넌트 안에서 프라미스의 pending, success, fail 상태를 처리하는 방법은 useEffect 훅과 상태가 있는 훅을 잘 조화시켜 처리하는 것이다. (271p)

8장 데이터 포함시키기

 

 

리액트를 처음 접해본 건 아니었지만, 책을 읽어보면서 지금까지 관용적으로 써왔던 문법들의 의미와 사용하는 이유에 대해서 자세히 알 수 있었습니다. 

(예를 들어 객체 구조 분해나, 리액트 프래그먼트 등이 있었습니다.) 

역시 어떤 기술이든 기본적인 방향성과 개념들을 먼저 잡는 것이 중요하다는 생각이 들었습니다! ​

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

SE-1f7dc391-2555-49c1-acb5-7015ce855fd0.jpg

대상 독자
- 리액트 입문자
- 전체적인 아키텍쳐를 이해하고 싶은 자

좋은 점
- 입문자를 위해 친절히 최신 자바스크립트 및 함수형 프로그래밍 소개
- 과거의 코드(1판에 수록된)를 보여주면서 리액트가 변화하는 과정을 보여줌
- 아이소모픽 리액트 앱에 대한 소개
- NOTE 세션을 통해서 우리가 놓치고 지나가거나 유용한 정보를 제공
- 테스트에 있어서 실용적인 예제

아쉬운 점
- 코드의 비중이 크다 보니 집중력이 떨어진다

총평
- 리액트에 입문할 때 필요한 모든 것이 준비된 책

 

 

 

Screen Shot 2021-07-25 at 10.10.29 PM.png

 

리액트는 자바스크립트언어 기반으로 작성된 라이브러리입니다.

 

주로 웹개발에 많이 사용되나 electron이라는 플랫폼이 생기며 데스크탑 앱 개발, react-native가 생기면서 모바일 앱 개발 까지 가능한

 

다재다능한 라이브러리입니다.

 

예전에 웹개발을 할때 리액트를 약간 다뤄본 적이 있었고, 가장 최근엔 위에서 기술한 electron을 활용하여 데스크탑 앱을 제작한 경험이 있습니다.

 

원래 웹개발자가 아니라서 자바스크립트도 익숙치 않았는데도 구글링을 하며 금새 웹페이지를 만들 수있을 만큼 리액트는 진입장벽이 낮습니다.

 

하지만 계속 겉핥기식으로 필요할때마다 구글링을해서 개발을 할순 없었고, 리액트에 대한 깊은 공부를 하고 싶었던 찰나 좋은 기회로 이 책을 읽게 되었습니다.

 

이 책은 리액트 라이브러리와 자바스크립트 언어 기술을 함께 배우고 싶은 개발자를 대상으로 하고 있습니다.

 

기본적인 리액트에 대한 지식부터 자바스크립트 사용법과 간단한 팁, 그리고 좋은 예제를 통해 웹개발을 잘 설명해주고 있습니다.

 

책이 300페이지가 넘는 만큼 방대한 양을 서술하고 있으며, 리액트와 자바스크립트를 잘 몰라도 기본적인 프로그래밍에 대한 지식,

 

웹 동작방식정도만 알고있으면 책 내용을 이해하는데 크게 어려움이 없습니다.

 

또한 책의 예제코드를 깃헙을 통해 제공하고 있어서 추후 실전에서 참고로 사용할 수도 있습니다.

 

제가 가장 관심있게 읽었던 챕터는 10. 리액트 테스트 입니다.

 

이 챕터에서는 eslint, prettier 등을 활용한 코딩 스타일 관리, proptype을 이용한 타입 관리 및

 

기본적인 테스트 방법론, jest를 이용한 테스트 방법까지 잘 설명해주고 있습니다.

 

리액트를 처음 접하시는 분들은 챕터1부터 차근차근 읽어보시면 리액트에 대한 개념과 기본기를 확실히 잡을 수 있습니다.

 

 저처럼 리액트를 조금 해보신분들도 개념을 확실히 잡으시려면 처음부터 읽으시는것도 좋고 필요하신 챕터만 따로 읽어보는 것도 추천드립니다.

 

 

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

 

 

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

이 책은 2018년 [러닝 리액트 1판]에 이은 제 2판 책이다. Vue.js와 더불어 SPA의 최강자 JavaScript Framework인 React 책의 정수라 할만한 책이다. JavaScript Framework 양대 산맥이라 일컫는 Vue.js는 국내보다는 해외에서 많이 쓰이지만, 명실상부하게 국내에서는 항상 교육이든 세미나든 React 유저가 Vue.js를 앞서왔다. 다시 말해 React를 할 수 있다라는 것은 곧 Front-end의 최전방에서 있다는 것을 의미하는 것이다.

사실 React는 Vue.js보다 더 까다롭다. 절대로 EcmaScript를 제대로 알지 못하면 학습이나 개발이나 항상 벽에 부딪히는, 러닝커브가 매우 큰 라이브러리이다. 그래서 다른 분야도 크게 다르지 않겠지만 React를 배우는데 있어서 양서를 만나는 것이 정말 중요한 과목이다. 현직에서 Front-end를 개발하고 강의하는 필자로서는 가르치는 학생들에게 더 좋은 양서를 추천하는 것이 때로는 쉽지 않은 일인데, 이 책은 그런 시름을 한 결 가볍게 해 준 책이다.

이 책의 구성은 앞부분에서는 기본적으로 React 학습에 대해 준비할 사항들을 열거하고 있고, 그 길을 지나면 React의 작동원리, React에서 결코 빼놓을 수 없는 JSX를 지나 서서히 피치를 올리면 내달릴 준비를 한다. 결국 Next.js를 통한 SSR까지 가면 이제 한숨을 쉬고 어느덧 React의 미래를 논의하는 단계에 이르게 한다.  이제 당신은 이 저자의 러닝 패스를 러닝하며 한 발자국 한 발자국 그 길을 따라가기만 하면 된다.

본 리뷰는 출판사 한빛미디어 <나는 리뷰어다> 활동을 위해 무상으로 책을 제공받은 후 작성된 리뷰임을 고지합니다.

 

 

 

웹 프론트엔드 분야는 아직까지 SPA의 시대입니다. 단일 웹페이지로 구성된 웹 애플리케이션을 의미하는 SPA(Single Page Application)은 최초 페이지의 리소스를 모두 받아와 로딩하고, 이후에는 서버로부터 데이터만을 받아와서 지속적으로 동일한 페이지를 사용자에게 보여주는 렌더링 방식을 사용합니다. 즉, 데이터의 변경이 일어나는 부분만 수정하므로, 효율적이고 자연스러운 서비스의 제공이 가능합니다.

 

대표적인 SPA 라이브러리는 Angular JS, Vue.JS, React로, 이 중에서도 React가 아직까지 굳건한 점유율을 굳히고 있다는 것 또한 사실입니다. 2013년에 리액트가 공개 된 이후로, 벌써 8년이란 세월이 지났고, 앞으로 리액트의 향방이 어떻게 될지도 알 수 없는 상황이지만, 적어도 2021년 하반기로 넘어가는 이 시점까지, 리액트는 아주 굳건한 프론트엔드 라이브러리의 대표 주자입니다. 또, 탄생 이후로 프론트엔드 분야와 함께 발전해오며, 현존하는 프론트엔드 개발자들의 직무를 명확히 하는데에 큰 도움을 주었다는 것 또한 사실입니다.

 

최근 리액트에 대한 관심이 커지게 되어, 타 출판사의 교재들과 함께 한 동안 리액트를 집중적으로 공부하게 되었습니다. 특히 개정 2판으로 새롭게 출간된 러닝 리액트에도 많은 관심을 가지고 있었는데, 마침 7월 리뷰 도서로 제공받게 되어, 무척 좋았습니다.

 

일단, 출판사에서 권장하는 사전 지식은 '자바스크립트 초급', 그리고 사전 학습을 권장하는 책들로 '모던 자바스크립트 핵심 가이드'를 비롯한 자바스크립트 입문 학습서가 나열되어 있습니다. 여기에 더해, '리액트로 효율적인 웹 UI를 구축하려는 개발자를 위한 본격 입문서'라는 카피가 적혀 있지만, 무작정 이 책으로 리액트에 입문하기엔 꽤 무리가 있는 것도 사실입니다. 

 

O'REILLY의 IT 서적들은 대부분 높은 퀄리티를 갖추고 있지만, 국내 출판사에서 출간된 한국인 저자의 책과 사뭇 다른 형태가 많다는 것 또한 사실입니다. 예컨대, 항상 국내 서적만 읽어오신 분들이라면 약간의 불친절함을 느낄 수도 있습니다.

똑같이 '입문서'라는 카피로 나온 책이라도, 하나부터 열까지 친절하게 예제 코드, 예제 코드를 실행시키는 명령어까지, 매번 제공하면서 다 떠먹여주는 책이 있는가 하면, 이 코드가 실제로 작동을 시켜야하는 예제 코드인지, 아니면 보고 넘어가야 하는 코드인지, 트러블슈팅은 어떻게 해야되는지, 책을 넘길 때마다 아리송하게 느껴지는 부분이 많은 책도 있습니다.

 

이 책은 후자에 가깝습니다. 즉, 이제 막 HTML/CSS/JS 조금 맛 보고, 프론트엔드 개발 한번 해보자 하고 웹 개발 입문 단계에 머무르고 있는 개발자들이 학습하기에는 비교적 난관이 많이 있을 법한 책입니다. 하지만, 리액트를 제대로 공부해보고자 한다면 언젠가 분명 보게 될 책이기도 합니다.

 

시중의 많은 입문서들은 '일단 만들어보기'를 시도하는 형태로 구성되어 있습니다. create-react-app을 사용해서 바로 개발 세팅을 마치고, jsx 파일 안에 components를 하드코딩 해서 일단 무언가 만들어보면서 감을 잡는 것과 같은 내용인데요. 이런 구성에 익숙하고, 이런 구성을 기대하면서 이 책을 펼쳐 들었다면, 조금 난감한 상황이 찾아올 수 있습니다.

때문에, 완전한 리액트 입문자라면 본 도서보다 조금 더 실습 위주의, 평이한 난이도의 도서로 먼저 리액트를 맛본 후에, 어느 정도 리액트의 개념을 잡아야겠다는 생각이 들 때에 러닝 리액트를 보는 것을 추천드립니다.

 

이미 어느 정도 리액트를 체험해보신 분들이라면 7장부터 많은 도움이 되실 것 같습니다. 저 역시 리액트 학습을 시작한지 얼마 안 된 시점에서 본 도서를 봤을 때보다, 어느 정도 실습이 진행되고 기초 개념에 대한 이해가 수반된 다음에 다시 본 도서를 봤을 때 훨씬 많은 도움이 되었습니다. 따라서, 완전한 입문서로 본 책에 접근하기 보다는, 입문서를 하나 정도 뗀 후에, 다음 과정으로 시작하는 것이 좋으리라 생각됩니다.

 

모쪼록, 많은 리액트 개발자 분들에게 선택 받아온 러닝 리액트는 분명히 실무에 근접한, 좋은 퀄리티의 학습 교재로 보입니다. 만약 리액트 입문을 고려하고 계신 분들이라면, 타 교재와 함께 러닝 리액트 2판을 같이 구매하시는 것을 적극 추천드리고 싶습니다.

 

러닝 리액트

 

서문

현재 react는 javascript 기반 front-end framework에서 가장 인기가 많다. 나도 angular로 개발을 시작했으나, 대중성이 떨어지는 부분이 아쉬워서 본격적으로 개발자로 전향할 당시 react로 사용하는 프레임워크를 바꿨다. 사실 리액트는 프레임워크라고 하기보다는 라이브러리에 가깝지만, 편의상 프레임워크라고 쓰겠다.
여하간 이러한 상황때문에, 프론트엔드 개발자로 성장하기 위한 사람들이 이런 저런 도서를 많이 찾아보고 있을거란 생각이 든다. 대충 부트캠프 커리큘럼을 들어보면 거의 대부분은 리액트를 가르치고있고, 다른 직군을 경험하다가 프론트엔드로 전향하는 개발자들도 거의 다른 프레임워크는 고려하지 않고 리액트를 선택하는 듯하다.(아마 인강 등 배울 수있는 채널이 상대적으로 많아서 그런 것 같기도 하다.)

감상

결론부터 말하자면 러닝 리액트는 한번 자바스크립트를 경험해보고, 벨로퍼트님이나 리액트 공식문서등을 보면서 리액트를 한 번쯤을 경험해본 사람에게는 쭉 훑으면서 정리하기에 좋은 책인 것같다. 초보자들이 보기에는, 뭔가 이 책을 기준으로 삼기에는 어려울 수도있고, 잘 못 이해하고 넘어갈 수도 있을 것같다는 우려가 조금 있었다.
프론트엔드 현업자로써는 그냥 쭉 훑고 지나가면서 그동안 알던것들을 정리하고 넘어가기에 정말 좋다고 생각한다. 책의 두께도 얇은 편이어서 훌훌 읽고 넘어가기에 나는 좋았던 것 같다.

개인적으로는 리액트에 대한 경험이 있다면 있음에도 불구하고, 개념적으로 기본적인 것들이 비어있는 편인다. 사용은 잘 하는 편이지만, 정확하게 설명하자면 잘 모르겠는? 그런 상태여서 나에게 많은 정리를 도와준 책이었다.

나름 자바스크립트의 설명이 있긴 하지만, 초보자들은 이 책의 내용외에 다른 자바스크립트 책을 꼭 보고 정리하는 것을 추천드린다. 약간 모르는 사람이 보면 와닿지 않을 표현들이 꽤 있을 것 같다는 생각이 들었다.

다만, 정리입장에서 좋았던 것은 함수형 프로그래밍에 대해서 정리한 파트였는데, filter, map, reduce를 함수형 프로그래밍 쪽에 묶에서 넣었던 것이 개인적으로 조금 신선했다.

흐름만 따라서 읽다보면, graphql에 대한 짤막한 소개도 지금 시점에서는 괜찮다고 생각이 들었다. gatsby도 graphql을 사용하고 있고, react를 만든 facebook에서 graphql관리를 위한 프레임워크인 relay를 제공하고있기 때문이다.

마치며

예시코드도 제공하고 있어, 따라치면서 쫓아가보다보면 어느정도 리액트에 대한 흐름을 알 수 있다고 생각한다. 꽤 인상깊었던 것은 예시코드를 시맨틱하게 작성했던 부분이며, 이런 부분을 유의해서 보면 인사이트는 얻을 수 있다고 생각한다. 다만 코드는 해당 개념을 이해하는 정도로만 익혀두면 좋을 듯하다.

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

 

자바스크립트의 연장선상에있는 리액트에 관한 몇안되는 서적.

 

가벼운듯 결코 가볍지않고, 쉬워보여도 결코 만만하지않은  자바스크립트 베이스의 리액트에대한 재이있는 이야기를 펼쳐낸 책으로 보인다.

 

MVC중에 V(뷰어, UI)에 해당 한다며 시작하는 내용은 간단한 설치과정(정말 간단한 내용)과 또한 간단한 소개 미래에대해서 언급을 시작으로 새로운 신세계를 풀어나가고있다.

 

자바스크립트에대해 막연한 지식만 있는 독자를위해 간단한 자바스크립트의 이해해보자는듯 간단한 코드를 시작으로 리액트 코드는 별거아니다, 그런데 강하다라는 신념을 주는듯 간결하고 강력한 자바스크립트의 장점등을 잘 보여주고있다. 

 

간단한 자바스크립트 코드로 시작해서 ...... 리액트 코드가 이렇다......라는식으로 조금씩 조금씩 차이점과 간결하면서도 강력한 성능을 보여주는 코드들로 리액트의 장점을 유감없이 보여주는 진행 방식으로, 짧은 시간에 빠져들도록해주고 있다.

 

잠간 쫓아가다보니 순식간에 웹페이지 작성으로 접으드는가 싶더니.....Github까지 유감없이 다루는것을 보고 리액트에 빠져들게하는 매력을 느끼게해주는것 같다.

 

최종적으로 리액트의 라우터 기능등을 설명하고, 서버를 고려한 뷰어 구축등의 좀더 고급 개념을 다루는것으로 리액트의 학습을 마무리하고 있다.

 

아직 리액트를 어떻게 당장 활용 할 수  있을지는 알수 없으나 얼마나 매력적인지를 충분히 느끼게해주었으며, 언젠가는 리액트 프로젝트를 진행해보고 싶다는 생각이들게했다.

[도서리뷰] 러닝 리액트 2판(Learning React)

** 이리뷰는 한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다. **

 

 

 

TLDR; Javascript의 최근 동향에 대해서 잘 모르시는 서버개발자분이 리액트를 배울때 보면 좋을 책. 리액트를 그냥 돌아가게 구현만 할 것이라면 튜토리얼 사이트와 인터넷에 널린 강좌 및 예제 코드들을 보고 쉽게 따라할 수 있습니다. 하지만 기초를 모르고 사용법만 알게되면 반쪽짜리도 못되게 된다는 사실은 여러분 모두 알고 계실 것 입니다. 러닝리액트의 구성이 서버개발자들에게 좋은 이유는 최근 javascript에서 통용되는 개념에 대한 설명이 먼저 있고, 그 후 리액트에 대한 설명이 있다는 점 입니다. 기본을 알때와 모를때의 습득 속도는 큰 차이가 납니다. 돌아가는것 처럼 보이지만 결과적으로 러닝리액트를 이용해서 리액트를 배우면 더 빠르게 배웁니다. 

 

 

오늘 리뷰해볼 도서는 러닝리액트 2판 입니다. 일단 2판으로 개정되서 나왔다는 이야기는 1판의 내용이 좋았고, 그만큼 인정받았다는 뜻 이겠지요. 그리고 저자분들도 책임감을 가지고 변경된 부분을 알려주는 것 이니 참 좋은 스승님들 이라는 생각이 듭니다.

 평소 리뷰를 할 때 목차를 항삼 남겼는데, 오늘은 목차는 생략 하도록 하겠습니다. 

 저는 서버 프로그래머입니다. 좀 더 자세하게는 자바를 주로 다루는 개발자입니다. 최근 트랜드는 프론트엔드와 백엔드가 분리되어 MVVM패턴을 이용해서 서버 개발자는 서버가 해야할 일만 하고, 유저와의 인터렉션은 프론트앤드 개발자에게 온전히 맞기는것 입니다. 하지만 저의 경우는 회사의 엔드유저인 일반 고객이 아닌 회사 내부 인원이 사용하는 프로그램을 주로 개발 했습니다. 때문에 보여지는 화면은 중요도가 덜했었고, 기본적인 프론트엔드 프로그램도 작성 해야 했습니다. (물론 프론트앤드 개발자분들이 보시기엔 기본도 못하는 것이었겠지만요.) 때문에 자바스크립트도 사용할 줄 알았어야했고, 이런 저런 프론트엔드 기술도 사용을 했었습니다. 지금은 이런말을 하면 우습겠지만 제가 처음 현업을 시작할때는 제이쿼리도 사용할 줄 안다고 이력서에 적고 그랬습니다. ㅎㅎㅎㅎ

여하튼, 프론트엔드를 다루면서 javascript를 이용하여 코드를 작성하긴 했지만 트랜드를 따라가려고 노력하거나 하진 않았습니다. 서버쪽 공부하기에도 시간이 없었거든요. 그러다 한번씩 프론트앤드 쪽 기술을 들여다보면 깜짝깜짝 놀랍니다. 기술의 발전과 변화가 너무나도 빨라요. 어느날 봤더니 '프로미스'라는게 있네 이게 뭐지? 바빠서 공부 못하다가 또 보면 async? await? 이런것도 나오고 ES-lint는 뭐지? babel은 뭐지? 점점 기술 부채만 쌓여갑니다.

 물론 개발자니까 남이 만든 소스 보면서 따라하는 수준으로는 만들 수 있었지만, 공부해야 할 개념이 너무 많아서 시작하기도 두려워지게 되었습니다.  사실 저는 업무에 필요해서 anguler / vuejs / reactjs 모두 다 사용해본적은 있습니다. 다만 깊게 공부하기보단 동료 개발자들이 만들어둔 소스를 응용해서 만들기만 했었죠. 그러다가 이 책을 읽고 그동안 답답했던 부분들이 많이 해소되었습니다. 앞서 tldr에서 말씀드린것 처럼 javascript의 최근 동향에 대해 한번 훑고 리액트를 보기 시작하니 개념들이 이해가 매우 빨랐고, 그동안 아리송했던 소스코드들이 이해가 되기 시작했습니다.  javascript와 한동안 친하게 지내지 못하셨던분들이 react를 공부할때 좋은 책으로 추천 드리고싶습니다. 



출처: https://devms.tistory.com/569?category=747837 [요가하는프로그래머]

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

요즘 많은 코딩 관련 책들이 클론 코딩을 표방하고 있다. 클론 코딩이 실제 필요한 부분을 배우긴 좋지만 클론 코딩을 하다보면 모르고 넘어가는 부분이 있어, 영영 모르고 지나갈 수도 있다. 이 책은 리액트에서 배워야 하는 내용들을 자세히 체크해준다. 또한 게다가 자바스크립트를 잘 모르는 사람도, 기본 개념을 함께 배울 수 있는 책이었다.

요새 리액트는 함수형 프로그래밍을 지원하면서 많은 변화가 있었다. 

그래서 책에서는 리액트를 사용하기 위해 알아두어야 할 ECMA6에서 추가된 자바스크립트 문법의 소개와 함께

함수형 프로그래밍에서 초반에 다룹니다.

 

처음엔 왜 아는 내용을 또 다루지라고 할 수도 있는데, 빠르게 내용을 정리해주니 까먹었던 내용도 

되새겨 주며, 내용이 잘 정리되있었던 것 같아 읽어보면 분명 도움이 됩니다.

 

그리고 예제는 어렵지 않게 구성이 되어 있으며, Hook에 대해서 잘 다뤄진 책 중에 하나인 것 같다고

얘기하고 싶습니다. 단순하게 Hook에 대한 예제만 있는 것이 아니라 사용해야되는 이유와 개선하는 방법을

설명해줘서 Hook을 이해하고 정리하는데 좋았었습니다. 

 

그래서 이 책은 리액트에 대해서 배우고 싶거나 또는 리액트를 조금 접해 본 분들이 내용을 다잡기 위해서

보기 좋은 책인 것 같다는 느낌이였습니다.

 

또한 내용이 조금 아쉽다고 느껴질 수도 있는데, 최근 서버리스를 다룬 'Full Stack Serverlerss'라는 

책이 있는데, 리액트로 서버리스를 다루고 있지만 책 내용이 어렵지 않게 되어 있어 러닝리액트를 읽고

보면 좋은 것 같습니다.

 

 

cover.jpg

 

 

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

 

SE-7b78223d-97eb-433f-b5c2-d8659fe5f020.jpg


 

러닝 리액트(2판)

최적의 리액트 코드를 작성하기 위한 모범 사례와 패턴

 

 

대상 독자

-HTML, CSS, JavaScript 기초 지식이 있고 리액트를 막 배우기 시작한 사람

 

 

이 책의 구성

CH1 리액트 소개

CH2 리액트를 위한 자바스크립트

CH3 자바스크립트를 활용한 함수형 프로그래밍

CH4 리액트 작동 원리

CH5 JSX를 사용하는 리액트

CH6 리액트 상태 관리

CH7 훅스로 컴포넌트 개선하기

CH8 데이터 포함시키기

CH9 Suspense

CH10 리액트 테스트

CH11 리액트 라우터

CH12 리액트와 서버

 

 

서평

단순히리액트 사용법만 알려주는 것이 아니라 왜 리액트가 왜 좋고 배워볼만 한지 알려주고 리액트를 배울 때 알아야 하는 토대들. 자바스크립트 문법,바벨, 웹팩 등 실제 리액트 애플리케이션을 개발할 때 필요한 도구와 기술을 알려준다.

 

개인적으로2-3장이 정말 좋았다. 2장에서는 리액트를 위한 자바스크립트 문법을 다루는데 책에 나오는 예제에 쓰이는 자바스크립트 문법과 리액트를 사용할때 자주 사용되는 ES6 문법을 알려줘서 자바스크립트 언어를 잘 모르더라도 책을 보는데 큰 무리가 없을 것 같고 다시 문법을 복습할 수 있어서좋았다. 그리고 3장에서 함수형 프로그래밍 기법에서는 선언적, 명령형 프로그랭, 순수 함수, 고차 함수 등 개발자에게 중요한 프로그래밍사고방식을 심어준다.

 

4장부터본격적으로 리액트를 다룬다. 리액트의 작동 원리, JSX, 상태 관리, 훅스, 데이터를 배운다. 중간중간 리액트를 조금 더 편하게 사용하는팁과, 9장 Suspense는 상대적으로 가장 덜 중요한 장이지만 쓰지 말라고는 말하지 않는다는 등 저자분이 지금까지 리액트를 배우면서 얻은경험이 느껴지는 것 같다.

 

중간중간오탈자가 많았는데 내용 이해에 큰 불편함은 없었고, 약 380 페이지의 분량에서 리액트 대부분을 다루는데 구성은 알차지만 실습 예제로만이해하기엔 부족하다 느껴서 처음 리액트를 배우는 사람이라면 조금 힘들게 느껴질 수 있을 것 같다. 리액트의 생태계 발전이 활발해서 책으로배우지 말란 말을 많이 들었기에 조금 걱정했는데 함수형 컴포넌트, 훅스, 라우팅 등 최신 리액트의 근간을 알려줘서 기본기를 습득하기에는 충분한것 같아 추천하고 싶다.

 

 

"한빛미디어 <나는 리뷰어다> 활동을 위해서책을 제공받아 작성된 서평입니다."

 

 

 

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

 

 

1_표지.jpg

 

 

 

오늘은 "러닝 리액트 2판" 의 서평을 진행해보겠습니다. 

 

 

 

4_기본자바스크립트.jpg

 

3_기본자바스크립트.jpg

 

 

 

초반 챕터에서 자바스크립트에 대한 기본 문법을 알려주긴 하지만, 이정도로 자바스크립트에 대한 기본(?)을 익히고 바로 리액트를 실습하면서 익히기에는 조금 무리가 아닐까 싶습니다. 자바스크립트에 대한 기본서를 따로 공부하시고 이 초반챕터는 복습 차원에서 이해하면 좋지 않을까 생각합니다. 

 

 

 

 

5_함수형.jpg

 

 

 

 

리액트에서 중요한 개념 중 하나는 함수형 프로그래밍인데 이를 초반 챕터에서 다루기에 개념 잡는데 유용했습니다. 다른 리액트 입문서들에서는 이를 챕터로써 다루지는 않았었는데 저자의 의도처럼 '리액트를 잘 모르는' 사람을 위한다는 게 이러한 챕터 구성에서 느낄 수 있었습니다.

 

 

 

 

6_작동원리.jpg

 

 

 

챕터4 부터 리액트를 본격적으로 다루는데 그 기본을 조금 깊이 있게 설명해줍니다. 이러한 부분들을 보면 챕터5 까지는 자바스크립트에 대한 기본을 리마인드 및 정리, 리액트 개념과 컨셉 설명을 잘 해주는 기초적인 부분이고 6장부터 상태 관리를 다루면서 베이직하게 들어간다고 생각합니다. 

 

이 책을 쭉 보면 좋은 사람은 우선 리액트에 대한 2번째 기본서 또는 1번째 기본서로 좋아보이는 느낌입니다. 국내 저자가 쓴 리액트 책과 이 책을 같이 보면 리액트의 초중급 정도의 실력은 익힐 수 있을 것 같습니다. 이후 본인이 프로젝트를 하면서 실력을 더 키울 수 있을 것 같구요.  

 

책의 예제와 코드들은 github 에 잘 있습니다. 

좋은 리액트 책이 나왔고, 책 구성은 제목처럼 리액트를 모르는 사람이 배우기에 잘 만들어졌다고 생각합니다!

 

 

 

 

 



[주요 내용]

- 자바스크립트를 사용해 함수형 프로그래밍의 핵심 개념

- 리액트가 브라우저에서 어떻게 작동하는지 내부 살펴보기

- 리액트 컴포넌트를 사용해 애플리케이션의 프리젠테이션 계층 만들기

- 데이터를 관리하는 방법과 애플리케이션 버그 수정 시간을 줄이는 방법

- 리액트 훅을 통해 상태를 관리하고 데이터를 외부에서 읽어오는 방법

- 단일 페이지 애플리케이션(SPA)에서 라우팅 해법 사용하기

- 서버를 염두에 둔 아이소모픽 리액트 애플리케이션의 구조를 잡는 방법


[대상독자]

주요 독자는 최신 자바스크립트와 함수형 프로그래밍 개념을 익히고 이를 바탕으로 리액트 개념을 잘 이해함으로써 리액트에 입문하고 싶은 개발자다. 이 책은 여러분이 원하는 목표를 리액트로 성취할 수 있도록 도와줄 것이다.


[서평]

리액트는 페이스북이 개발한 자바스크립트 라이브러리로 넷플릭스, 월마트, 뉴욕타임스 등 글로벌 기업의 웹 인터페이스에 적극 도입되며 세력을 넓히고 있다. 리액트를 활용하면 데이터 기반 웹 사이트에서 페이지를 새로고침하지 않고도 데이터 변화를 지능적으로 표시할 수 있다. 이 책은 리액트로 효율적인 웹 UI를 구축하는 방법을 설명하고, 함수형 프로그래밍과 최신 ECMAScript 기능을 다양한 예제와 함께 안내한다. 리덕스 관련 내용도 2개 장에 걸쳐 자세히 다룬다. 이 책으로 리액트 컴포넌트 구축 방법을 익히고 나면 실무에서 유용하게 활용할 수 있을 것이다.


이책의 구성은 크게 3가지로 나누어 볼수 있다.

  1. 1장~3장 리액트 소개 및 ES6 기초 문법 과 함수형 프로그래밍 

  2. 4장~8장 리액트 기본 문법

  3. 9장~12장 리액트 고급 기능


 객체 리터럴 개선에 대해서 옛날 방식과 요즘 사용하는 문법에 대해서 비교 어떻게 변화되었는지 알수 있다.


순수 함수에 대해서 좀더 추가적인 내용은 NOTE로 설명을 하고 있어 이해하는데 도움이 되었다.


리액트 문법에 대한 결과가 어떻게 나오는지 바로 알수 있다.


리액트 컴포넌트를 만드는 방법 2013년도 예전 방식


앞의 방법은 디플레케이트로 사용하면 된다고 알려주고 리액트 커컴포넌트를 만드는 새로운 방법을 소개하고 있다.


테스트 주도 개발은 리액트 뿐만 아니라 모든 언어에 대해서 필요한 개발방법론이다. 여기서는 테스트 주도 개발(TDD)에 대해서 어떻게 연습하는지 알려주고 있다.


React 개념이 처음인 사용자들이 입문하기에 좋은 책이다. 책을 보면 알겠지만 예제가 많고, 같은 개념도 하나의 예제가 아니라 여러 예제들을 싣고 있어 좋았다.

 

 "한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

이 글은 한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다

이번에는 리액트책을 받아서 보게 되었다. 간간히 JS를 활용한 무언가를 만들때 찍먹해볼때가 있었는데, 리액트에 대한 설명은 거의 없이, 그냥 어떻게 짜면 된다~ 식으로 써먹었기 때문에, 이 기반에 대해서 잘 몰랐고 또 알고 싶어서 받아보게 되었다.

책 초반부에는 JS에 대한 기초 문법 설명이 나오고 리액트의 컴포넌트를 만드는 방법에 대해서 설명해준다. 기초적인 웹 지식은 있어야 볼 수 있는 것 같다. 리액트 컴포넌트를 만드는 다양한 방식을 설명해준다. 예를 들어서 예전에 많이 사용했던 class로 만드는 방식, 지금 많이 쓰고 있는 함수로 만드는 방식 등등을 소개해주며 어떤 것을 더 사용해야하는지와 이유에 대해서 설명해주고 있다.

이후에는 상태를 다루는 내용과 컨텍스트, 훅 등을 다룬다. 이런식으로 글과 설명을 위한 이미지, 코드와 결과가 잘 나와있어서 이해하는데 큰 무리가 없었다.

이런 식으로 어떤 기능을 사용했을때 나름의 규칙같은 것들을 알려주기 때문에 사용할때 주의할 수 있게 해준다. 그리고 장점이나 단점에 대해서도 친절하게 설명해주기 때문에 잘 납득할 수 있어서 좋았던 것 같다.

전체적으로 리액트 자체에 대해서 많이 다루고 있으며 리액트 자체에 대해서 궁금해서 리액트를 배워보고 싶은 다른 분야 개발자들에게 도움이 될 것 같은 책이다. 내용이 그렇게 막 어렵진 않아서 숙 읽히고 따라해보기 괜찮아서 읽어보기 좋은 것 같다.

한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다.

이 책은 책리뷰를 위해 출판사에서 받아서 읽은 책입니다. 하지만 ("리액트"책이기 때문에, ) 출판사 리뷰가 아니더라도 꼭 구해서 봤을 겁니다. ( 이 책을 포함해서 리액트 책을 12권 읽었습니다. ) 이렇게 리액트에 대해 관심을 갖는건 리액트라는 라이브러리가 발전하는 방향성에 상당히 공감하고 있기 때문 아닐까 싶습니다.

2010년쯤 이었던 것 같습니다. 자바스크립트로 UX를 개발하는 프로젝트를 하고 있었는데요. 제가 사용하는 환경은 시스템 리소스가 많이 떨어져서 브라우저 올리기도 버거운 환경이었습니다. 그래서 동적으로 DOM 객체를 붙이는 일이 만만치 않았습니다. 분명 DOM API를 사용하는 것이 더 빠르다고 알고 있었는데, 어떤 상황에서는 innerHTML를 사용하는 것이 더 빠르더군요. DOM API를 여러번 쓰는 것보다는 innerHTML한번으로 해결하는 것이 더 빨랐기 때문입니다. DOM영역도 자바스크립트 엔진 측에서 보면 외부 메모리 공간이기 때문인데요. API를 통해 데이터가 넘어가는건, 용량보다 횟수에 비례해서 속도가 늦어지기 마련입니다. 그래서 만약 자바스크립트 영역에 DOM을 미러링 하는 개념을 만든다면, 그리고 업데이트 주기를 최소화 시킨다면 DOM API를 여러번 호출하는 것보다 훨씬 빠르고 유연한 라이브러리를 만들 수 있겠다 싶었습니다.

물론, 그럴 만한 시간은 없었습니다. 그 프로젝트 자체가 다른 팀에서 5개월 가량 붙잡고 있다가 진행하지 못하고 넘긴 프로젝트였고, 우리팀에서도 저혼자 겨우 일을 처리하고 있었기 때문입니다.

그후 2013년쯤 앵귤라라는 라이브러리를 사용하면서, 데이터 바인딩이라는 개념에 크게 놀랐던 기억이 있습니다. 물론 앵귤라는 2.0으로 올라가면서 하위호화성을 배제했기 때문에 큰 깨달음을 선사했습니다. "한놈만 믿지 마라" 이거죠.

그리고 리액트라는 라이브러리가 있는것을 알게 되었습니다. 역시 다른일을 하고 있었기 때문에 진지하게 공부할 수 없었지만, 그 컨셉이 특히 virtualDOM이라는 컨셉이 정말 맘에 들었습니다. 예전에 해보고 싶었던 개념을 누군가 더 멋진 방법으로 구현해 낸것 같아서 상당히 부럽고 감사하기도 했습니다.

그후 리액트가 컴포넌트 방식으로 구현되어 있는 것을 보고 약간 실망하게 되었습니다. 당시 저는 자바스크립트를 사용하면서 자바스크립트가 객체지향이 아니라 함수형 프로그래밍 쪽에 가까운 언어라고 생각했는데요. 리액트를 만드는 사람들이라면, 당연히 함수형 프로그래밍으로 구현했을 꺼라 믿고 있었거든요.

2016년 부터 리액트에 대한 책이 출판되었다는 이야기를 들으면 열심히 구해서 읽었습니다. 한동안 컴포넌트 형으로 점점더 발전해 나가는것 같더니, 2019년 초에 리액트 훅이 발표됩니다. 그후 함수형 프로그래밍 방식으로 리액트가 진화해 오는 것을 지켜볼 수 있었습니다.

그렇습니다. 저는 꽤 오랜시간동안 Virtual DOM을 함수형 프로그래밍으로 개발할 수 있는 환경을 동경하고 있었습니다. 하지만 그걸 가장 잘해줄것 같은 React가 컴포넌트 방식으로 구현되어 있었기 때문에 상당히 실망하고 있었던 거죠. 그러나 리액트 훅이 나오면서 상황은 완전히 변했습니다.

그리고 이 책은 제가 읽었던 어떤 리액트 책보다 리액트 훅에 대해서 다이나믹하고 정확하게 설명하고 있는 책입니다. 물론 이 책의 저자들도 전편( 저는 이 책의 1판도 2018년에 읽었습니다. )에서는 컴포넌트 기반으로 설명했지만, 2판에 들어오면서 설명하는 내용을 모두 함수형 프로그래밍 방식으로 전환했습니다. 책이 서술하는 구조는 비슷합니다. 앞쪽에서는 자바스크립트를 설명하고 중간에서 거의 끝까지는 리액트를 설명한다음 리액트의 응용을 설명하는 구조 입니다.

2018년 9월 17일에 1판을 읽으면서 정리했던 내용을 찾아보니, 1편에서도 자바스크립트를 설명하는 과정에서 함수형 프로그래밍을 강조했었더군요. 이 책의 저자들은 1판을 쓸때 부터 함수형 프로그래밍 방식으로 자바스크립트를 대하고 있었던것 같습니다. 그래서, 이 책의 저자들의 책을 읽을 때마다 공감을 하게 되는것 아닌가 싶네요. (저자들은 GraphQL 책도 쓴게 있습니다. )

아직도 리액트를 컴포넌트 기반으로 작업하는 개발자들이 많은 것으로 알고 있습니다. (제가 다니는 회사에서도 여전히 컴포넌트 기반을 선호하시는 분들이 많더군요. ) 하지만, 그건 개발자 자신에게 그리 좋은 선택은 아닌것 같습니다. 어차피 코딩은 사고 방식에서 오는 겁니다. 컴포넌트 기반 사고 방식을 가질것인지 아니만 함수형 프로그래밍 사고방식을 가질 것인지에 대한 문제입니다. "결정론적 사고"라고 하죠. 수학적 함수 모델을 기초로 코딩을 하는 겁니다. 이런 코딩은 TDD를 도입하기도 수월하고 버그도 확실히 많이 줄일 수 있습니다. 게다가 십수년 후에 우리가 계속 코딩을 하고 있다면, 함수형 프로그래밍이 주류를 이루고 있을 것이니 지금부터 열심히 연습해야 하지 않을까 싶은데요. 따라서. 함수형 프로그래밍 관점에서 리액트를 설명하고 있는 이 책은 리액트 개발자들에게 필독서가 아닐까 싶습니다.

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다.

 

러닝 리액트(Learning React) - 최적의 리액트 코드를 작설하기 위한 모범 사례와 패턴


오라일리가 펴내는 책 표지에 등장하는 동물들은 대부분 멸종 위기이며, 우리 세계에서 중요한 동물이라고 한다. 그래서 표지를 더 오랫동안 보게되는 것 같다. 이번 OREILLY 표지 동물은 멧돼지다.

러닝 SQL에 이어서 이번에는 러닝 리액트 도서를 받아 리액트의 깊은 내용까지 이해할 수 있게 되었다.

 

 

최근 프론트엔드 개발자 모집공고를 보면 필수사항 또는 우대사항에 React.js가능자가 적혀있다. 그만큼 리액트는 중요한 기술 스택 중 하나이며, 현재 리액트를 배우고, 사용하는 입장에서 개념적으로 부족하다고 느꼈던 부분을 러닝 리액트를 통해 채워넣을 수 있었다.

리액트를 배우기에 앞서 리액트를 위한 자바스크립트에 대한 챕터가 구성되어있어서 친절하다고 느껴졌다.

이 책의 좋은점은 각 필요한 부분마다 간략한 예시와 실행했을때의 결과값을 보여줘서 이해가 쉽다는 점이다. 기초 뿐만아니라 비동기 자바스크립트의 내용까지 포함되어있어서 매번 이해하기 어려웠던 promise와 async/await에 대한 정확한 개념을 이해할 수 있었다. 자바스크립트 프로젝트에서 함수형 기법의 사용이 점점 늘어나는 추세인데, 이 책에서 제공하는 자바스크립트를 활용한 함수형 프로그래밍에 대한 챕터에서 고차 함수에 대한 내용이 주목을 끌었다. 화살표함수, promise, 스프레드 연산자 등 최근자바스크립트로 구현된 코드를 이해하기위해서는 필수로 알아야하는 지식들이 한번에 정리되어있다.

 

 

 

[ 함수형 프로그래밍 정리 ]

  • 명령형 프로그래밍 (imperative programming)
    • 코드로 원하는 결과를 달성해 나가는 과정에만 관심을 두는 프로그래밍 스타일
    • 코드안에서 어떤 일이 벌어지는지 코드를 읽는 사람이 더 잘 이해할 수 있게 돕기 위해 주석을 많이 달 필요가 있음
  • 선언적 프로그래밍 (delarative programming)
    • 필요한 것을 달성하는 과정을 하나하나 기술하는 것보다 필요한 것이 어떤 것인지를 기술하는 것에 더 방점을 두고 애플리케이션 구조를 세워나가는 프로그래밍 스타일
    • 코드 구문은 어떤 일이 발생해야 하는지에 대해 기술하고, 실제로 그 작업을 처리하는 방법은 추상화를 통해 아랫단에 감춰짐
    • 코드 자체가 어떤일이 벌어질지에 대해 설명하기 때문에 좀 더 추론하기가 쉬움
    • 추론하기 쉬운 애플리케이션을 만들어내며, 애플리케이션에 대한 추론이 쉬우면 애플리케이션의 규모를 확장하는 것도 더 쉬움

 

리액트는 선언적 프로그래밍

 

자바스크립트에 대한 내용을 배우고 나면, 리액트가 어떤식으로 작동되는지에 대한 중심 내용이 펼쳐진다.  앞부분에 나왔던 함수형 프로그래밍에 대한 내용은 리액트의 탄생과 연관이 되어있어 사전에 학습하니까 뒷부분의 이해가 더 수월했다. 

 

 

리액트 엘리먼트를 만들고, 브라우저에 렌더링을 하기 위해 ReactDOM을 사용한다. ReactDOM에는 리액트 엘리먼트를 브라우저에 렌더링하는데 필요한 모든 도구가 들어있다. 그리고 자식 엘리먼트를 만들기 위해 props.children을 사용하여 렌더링하는 등 리액트의 작동 원리에 대한 내용이 상세하게 나와있는게 특징이다. 리액트가 어떻게 작동하는지, 리액트 애플리케이션을 컴포넌트라고 불리는 재사용 가능한 작은 조각으로 쪼개는 방법에 대한 설명과 코드를 통해 작은 프로젝트를 진행할 수 있다.

 

 

글로는 이해하기 어려운 부분들은 이해하기 쉽도록 그림과 설명으로 구성되어있어서 처음 리액트를 배우는 사람에게도 이해가 쉬울 것 같다. 

 

 

[ 개인적으로 생각하는 이 책을 읽으면 좋을 대상 ] 

  • 자바스크립트가 무엇인지 알지만 비동기와 함수형 프로그래밍 등 깊은 내용을 모르는 사람
  • 리액트 기초 및 심화 과정의 작은 프로젝트를 진행하고 싶은 사람
  • 데이터를 관리하는 방법과 애플리케이션 버그 수정시간을 줄이는 방법에 대해 배우고자하는 사람
  • 앱을 서버 렌더링하는 방법에 대해 알고자하는 사람

 

위 도서를 한번 정독하고나면 자바스크립트, 리액트에 대한 내용은 마스터할 것이라고 생각한다.

 

"이 책은 짧고 간결하게 리액트의 정수를 소개하고 있다는 점에서 강력히 권장할 만하다."

옮긴이의 글 대로 이 책은 짧고 간결하게 리액트의 정수를 알차게 담았습니다.

그러면서 책이 무겁지 않아 가지고 다니기 부담이 없죠.(저는 가방에 넣어 출퇴근 시간에 읽었습니다.)

 

특히 이 책의 3장은 리액트뿐만 아니라 다른 프레임워크나 라이브러리, 심지어 다른 언어를 쓰더라도

어떻게 함수를 작성해야 하는가에 대한 통찰을 제공합니다. 정말 좋은 내용이라는 생각입니다.

 

'짧은 시간에 배워 빠르게 써먹는다'가 아닌 '원리부터 차근차근'인 점도 마음에 듭니다.

 

단, 한 가지 아쉬운 점은 오탈자와 번역입니다. 읽다보면 오탈자를 꽤 드물게 발견할 수 있습니다.

오탈자가 내용을 이해하는데 큰 걸림이 아니어서 다행인데 문제는 번역입니다.

중간에 번역이 빠진듯 어색한 부분이 있는가 하면, 언급을 잘못한 부분도 있습니다.

 

두고두고 봐도 좋을 책이기에 위 문제를 수정한 책이 나왔으면 좋겠다는 생각입니다.

 

SE-91167f48-a93b-4d69-b783-618cf82deb8c.jpg

 

최근 프론트엔드 개발자로 일하면서 React는 빠질 수 없는 존재다.

페이스북에서 사용하고 있어 Vue 보다 더 점유율이 높고 React-navtive까지 지원하니 많은 사람들이 관심을 갖고 공부를 하고 있다.

그중에 나도 한 명인데 관심만 갖고 공부를 하지 않고 있는 상태였다.

책 사고 스터디하고 강의 결제하고 딱 여기까지 보고 공부하고 듣지를 않는다.

 

이번에 한빛에서 지원받은 책이 러닝리액트 2판(Learning React)라서 타이밍 좋게 집중하고 힘들게 책을 읽어봤다.

O'REILLY 출판사에서 나온 책답게 표지 동물은 멧돼지이다. 아주아주 무섭다.

 

러닝 리액트 2판

 

쓰다 보니 러닝 리액트 1판도 예전에 구매했던 기억이 생각났다. 

1판(2018년)에서는 리덕스(redux)에 대한 내용을 다뤘다면 2판에서는 훅스(hooks) 관련 내용으로 이루어져 있다.

React는 버전별로 많은 부분들이 변경되기 때문에 항상 어떤 버전을 사용하는지 파악해야 한다.

이렇게 따지면 공식문서를 보고 공부하는 게 제일 좋긴 하지만 공식문서를 볼 정도의 기량이 없으므로

쉽게 설명하는 책을 보고 공부하는 것도 하나의 방법이다.

목차

CHAPTER 1 리액트 소개

1.1 튼튼한 토대
1.2 리액트의 과거와 미래
1.3 코드 예제 사용법

CHAPTER 2 리액트를 위한 자바스크립트

2.1 변수 선언하기
2.2 함수 만들기
2.3 자바스크립트 컴파일하기
2.4 객체와 배열
2.5 비동기 자바스크립트
2.6 클래스
2.7 ES6 모듈

CHAPTER 3 자바스크립트를 활용한 함수형 프로그래밍

3.1 함수형이란 무엇인가?
3.2 명령형 프로그래밍과 선언적 프로그래밍 비교
3.3 함수형 프로그래밍의 개념

CHAPTER 4 리액트의 작동 원리

4.1 페이지 설정
4.2 리액트 엘리먼트
4.3 ReactDOM
4.4 리액트 컴포넌트

CHAPTER 5 JSX를 사용하는 리액트

5.1 JSX로 리액트 엘리먼트 정의하기
5.2 바벨
5.3 JSX로 작성한 조리법
5.4 리액트 프래그먼트
5.5 웹팩 소개

CHAPTER 6 리액트 상태 관리

6.1 별점 컴포넌트 만들기
6.2 useState 훅
6.3 재사용성을 높이기 위한 리팩터링
6.4 컴포넌트 트리 안의 상태
6.5 폼 만들기
6.6 리액트 콘텍스트

CHAPTER 7 훅스로 컴포넌트 개선하기

7.1 useEffect 소개

CHAPTER 8 데이터 포함시키기

8.1 데이터 요청하기
8.2 렌더 프롭
8.3 가상화된 리스트
8.4 GraphQL 소개

CHAPTER 9 Suspense

9.1 오류 경계
9.2 코드 분리하기

CHAPTER 10 리액트 테스트

10.2 프리티어.10.3 리액트 애플리케이션을 위한 타입 검사
10.4 테스트 주도 개발
10.5 제스트 사용하기
10.6 리액트 컴포넌트 테스트하기

CHAPTER 11 리액트 라우터

11.1 라우터 사용하기
11.2 라우터 프로퍼티
11.3 리디렉션 사용하기

CHAPTER 12 리액트와 서버

12.1 아이소모피즘과 유니버설리즘 비교
12.2 서버 렌더링 리액트
12.3 넥스트.js를 사용한 서버 렌더링
12.4 개츠비
12.5 리액트의 미래

후기

이번엔 목차에 따라 후기를 써보겠다.

1-5장까지 자바스크립트, 리액트에 대한 기본 지식, 세팅을 설명해 놓고 꼭 필수로 꼼꼼하게 읽고 넘어가야 한다.

언제나 기초가 중요하다. 물론 이미 다 아시는 분들이면 넘어가도 상관없다.

항상 책을 볼 때 기초를 훅훅 넘어가고 실무나 자주 하는 부분들만 살펴보니 원론적인 부분들을 많이 놓쳐 어려워한 적이 간혹 있었다.

덕분에 책을 보는 시간이 길어지고 안 좋은 점도 있지만, 한번 더 지식을 다지는 느낌으로 보려고 노력한다.

 

6-7장부터 상태 관리를 다루면서 훅스에 대한 내용이 나오기 시작한다.

훅스를 통해서 상태관리를 하고 최적화 캐싱 등에 왜 필요한지 어떻게 사용하는지에 대한 설명이 있다.

 

8장에서는 개발하면서 필요한 데이터를 받고 그 데이터를 처리하는 과정(fetch, JSON, 네트워크 등)을 설명했다.

프런트 개발하면서 꼭 필요한 부분이므로 잘 보고 잘 챙겨가길 바란다.

 

내가 생각하긴 8장까지 기초 느낌이고 9장부터 심화로 대충 나눠보았다.

8장까지는 꼭 완벽하게 보고 이해하고 그다음 9장부터 보면 좋을 것 같다.

 

책에서 예제로 설명한 github를 통한 데이터 가공, 12장에서 설명하는 리액트 서버 관련 예제를 곧 블로그에 포스팅할 예정이다.

 

한빛미디어에서 <나는 리뷰어다>를 통해 책을 지원받아 작성한 리뷰입니다.

 

리액트에 관심은 있으면서도 접해볼 기회가 없어서 아쉬워하고 있던 참에 리뷰어 기회로 접해볼 수 있게 되었다.

 

리액트에 들어가기 전에 리액트의 기본이 되는 자바스크립트 문법들을 알려주며 앞으로 사용하게 될 스크립트의 개념들을 설명해주는 부분이 좋았다. 리액트 경험이 없는 초보자도 학습과정을 통해 리액트의 개념을 이해하기 쉽도록 구성되어 있는 것 같다. 개인적으로 최근 프로젝트의 경향이 뷰 아니면 리액트가 많이 있다 보니 잘은 몰라도 아예 모르면 안 될 것 같아 책을 보면서 개념을 잡아가고 있는 중이다.

 

리액트 생태계도 구성된 지 시간이 꽤 지났고 여러 프로젝트에서 사용되고 있는 만큼 이 한 권으로 리액트에 대해 모두 학습하는 건 어려울지도 모르겠지만 이 책을 제대로 공부한다면 리 엑트의 기본은 충분히 배울 수 있을 것 같아 보인다.(의지가 문제지만..) 새로운 언어라서 마냥 두려움만을 가지기보다는 좋은 책을 기준으로 조금씩  접근해 보려 한다.

 

책은 대체로 읽기 편하게 번역이 되어 있는 것 같지만 책의 구성과 번역의 수준보다 교정, 감수 쪽의 아쉬움이 많이 남는 책이다. 뭔가 일괄 치환 작업에서 나올법한 오탈자가 제법 보여서 아쉬웠고 일반적으로 입문/초보자들을 대상으로 하는 책에서 다루는 리액트 설치나 환경설정 등에 대한 가이드가 부족한 느낌을 지울 수 없다.(이 정도는 기본이라는 것이겠지만..)

 

IMG_2508.JPG

 

아쉬운 점은 있지만 리액트를 공부할때 어디서부터 시작해야 좋을지 모르겠다면 이 책으로 시작해 보면 좋을 것 같다. 이제는 프로그램 학습서들에서 기본적으로 제공하는 github의 소스도 있어 학습할때 에러가 나오는 내 소스와 저자의 소스를 비교하며 학습이 가능한 부분은 기본적이면서도 혼자 학습하기에 좋은 것 같다.

한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다.

 

러닝 리액트 


최적의 리액트 코드를 작성하기 위한 모범 사례와 패턴이 담긴 책이다. 프런트엔드 커뮤니티에서 볼 수 없었던 책으로 저자는 리액트를 깊이 설명할 뿐 아니라 자바스크립트 기본 개념과 테스트, 상태 관리 등의 내용도 다룬다. 

 

KakaoTalk_20210720_201533833.jpg

 

KakaoTalk_20210720_201533833_01.jpg

 

KakaoTalk_20210720_201533833_03.jpg

 

KakaoTalk_20210720_201533833_04.jpg

 


 

특이한건 의외의 유머들까지 섞어가며 알기 쉽게 설명한다는 점이다. 효율적인 리액트 애플리케이션 작성법을 간결하고 쉽고 빠르게 배우길 원한다면 이 책을 추천한다. 특히 브라우저에서 작동하는 자바스크립트, CSS, HTML을 아는 웹 개발자나 소프트웨어 엔지니어에게 이상적인 이 책은 최신 리액트 코드를 작성하기 위한 모범 사례와 패턴을 소개한다. 


리액트나 함수형 자바스크립트에 대한 지식이 없는 입문자도 이 책을 통해 리액트를 제대로 쓰는 법을 배울 수 있다. 대규모 데이터 기반 웹사이트에서 페이지를 다시 요청하지 않고도 데이터 변화에 따라 화면을 교묘하게 변경하는 UI 제작법을 학습 로드맵에 맞춰 차근차근 설명한다. 그 과정에서 함수형 프로그래밍과 최신 ECMAScript 기능을 다양한 예제와 함께 안내한다.


책의 구성은 리액트 소개부터 리액트와 서버까지 12개의 강의로 이어지고 리액트를 위한 자바스크립트와 자바스크립트를 활용한 함수형 프로그래밍, 리액트의 작동 원리, JSX를 사용하는 리액트, 리액트 상태 관리, 훅스로 컴포넌트 개선하기 등을 배울 수 있다. 

 

리액트를 사용하면 UI 컴포넌트를 정의하고 정의한 컴포넌트를 선언적으로 활용해 UI를 구축하고 제어할 수 있다. 리액트 라이브러리 자체는 비교적 간단한 UI 라이브러리라고 할 수 있지만, 리액트를 뒷받침하는 합성성과 관심사 분리, 데이터 흐름 방향의 단순화 등의 아이디어는 UI뿐 아니라 다양한 응용 분야에서도 활용할 수 있어 유용하다. 이 책을 통해 리액트의 핵심 요소를 잘 이해하면 리액트 공식 문서나 더 자세하고 복잡한 리액트 책을 더 쉽게 이해하고 자신의 프로젝트에 리액트를 더 잘 응용할 수 있다.

오늘은 2021년 7월에 출간된 <러닝 리액트 2E>에 대해 소개합니다. 기존 <러닝 리액트 1E>의 개정판으로 최적의 리액트 코드를 작성하기 위한 지식이 담겨 있는 책입니다. 

이 책의 저자는 알렉스 뱅크스 , 이브 포셀로이며, 역자는 오현석 님입니다. 오현석 님의 번역은 항상 좋았고, 대부분의 독자가 번역에 대해 불편함을 느끼시지는 않을 것으로 생각합니다. 다만, 최근 한빛미디어에서 출간한 책에서 보기 힘들었었는데, 이 책의 교정 품질은 높은 점수를 주기 어려울 것 같습니다. 

<러닝 리액트 2E>는 약 400여 페이지로 구성되어 있어 휴대하면서 읽을 수 있는 책입니다. 또한, 이 책은 전차잭으로도 만나볼 수 있음으로 전자책 뷰어가 있으신 분은 전자책으로 보셔도 좋을 것 같습니다. 최근 한빛미디어 책들은 전자책으로도 만날 수 있어 개인적으로 매우 좋습니다. 

한빛미디어 리뷰 평가단에 참가하여 작성한 글이며, 한빛미디어에서 제공해준 책을 읽고 작성했음을 밝힙니다. 

이 책의 매력은?

<러닝 리액트 2E>는 최근 빠르게 개선되고 있는 최신 자바스크립트의 개선안을 활용하여 리액트 프로그램을 개발할 수 있도록 도와줍니다. 뿐만 아니라, 필자가 계속해서 관심을 두고 있는 함수형 프로그래밍을 리액트에서 도입/활용하는 방법을 안내합니다.

<러닝 리액트 2E>는 12개의 챕터로 구성되어 있습니다. 일반적인 리액스트의 소개부터 시작하여, 이 책에서 활용하는 최신 자바스크립트 스펙을 소개합니다. 이후에 함수형 프로그래밍에 대한 소개로 이 책을 읽기 위한 준비를 마칩니다. 이후부터 본격적인 리액트 학습에 들어갑니다. 리액트의 작동 원리, JSX, 상태관리, 혹스, 데이터 관리, Suspense, 테스트, 라우팅, SSR 등을 다루고 마칩니다. 이 책을 이용하여 리액트의 모든 것을 학습하는 것은 어렵습니다만, 리액트를 활용하는 데 갖춰야 할 기본 지식을 습득하기에는 좋은 책으로 여겨집니다.

마치면서

<러닝 리액트 2E>는 리액트를 활용하거나 학습할 분들에게 도움을 주는 책입니다. 리액트를 활용하면서 필수적으로 알아야 할 지식을 잘 반영하고 있습니다. '따라하기' 식의 책이 아니라, 리액트 입문자들에게는 다소 어려울 수도 있습니다. 하지만 따라하기 방식으로 구성된 책에서는 얻을 수 없는 다른 매력적인 부분을 느끼실 수 있으리라 생각합니다. 

 "한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

[ 선택 이유 ] 

기존의 초록 멧돼지 책이 새롭게 2판으로 돌아왔다. 

 

 

이 책을 선택한 이유는 리액트에 대한 수준 높은 코드를 제공해주기 때문이다. 

사수가 없이 일을 하는 나에게 래퍼런스로 삼을 코드가 필요했고 그런 면에서 이 책이 단연 베스트라고 생각해서 선택했다.

[ 본문 ] 

대부분의 리액트 책과 비슷한 구성이다.

웹에 대한 생태계에 대한 설명 -> 최신 자바스크립트 문법 -> 그리고 리액트에 대한 내용이다.

한가지 인상 깊었던 점은 다른 리액트 책은 바로 jsx로 들어가는 반면에 이 책은 jsx로 진화하는 일련의 과정을 그대로 담아냈다. 그래서 jsx에 대한 깊은 이해가 가능하다는 점이 이 책의 돋보이는 점이라고 할 수 있다.

다만 리액트를 써보지 않은 사람에겐 약간 어렵다.

전통적인 프로그래밍 책이라면 CRUD, To to list를 만들면서 하나씩 해나가는 것이 국룰이다. 그래서 따라해보면서 익히기 마련이다.

하지만 이 책은 그렇지 않다. 빠르게 설명하고 그 다음 실무수준으로 널뛴다음 깊게 설명한다. 그 간극을 처음 리액트를 접해본 사람에겐 어렵지 않을까 생각했다. 그래서 초급자와 실무자 사이 수준이던 나에게 좋았던 책이었다.

리액트를 공부한다고 하면

주변에서 입문서로 가장 많은 추천을 했던 책이

이번에 새로 개정판으로 나왔다 !!!

 

20210718_162357.jpg

 

[ Pros ]

- 리액트 입문자를 위한 친절한 책

: 리액트는 무엇인지, 변수 선언은 어떻게 하는지와 같은

기초적인 것부터 친절하고 쉽게 설명해준다.

 

- 샘플 코드와 결과를 보기 쉽게 제공

: 편집의 힘인 것 같은데,

희한하게 다른 책과 뭐가 다른지 딱 꼬집아 말할 수는 없지만

책을 보면서 소스 코드가 눈에 잘 들어왔다.

그리고 결과 등을 보여주는 부분도 보기 좋았다.

 

- 충실한 github.com 예제/정보 제공

: 예제 코드를 제공해주는 github에 꼭 접속해보기 바란다.

책에서 아쉬운 부분도 많이 채워준다.

Chapter에 맞춰서 꼭 github도 같이 보기를 강력하게 추천한다.

 

[ Cons ]

- 개발환경 구축에 대한 설명 미흡

: 입문자를 위한 책임에도

개발환경을 갖추는 부분에 대한 설명이 조금 부족하다.

없는 것은 아닌데... 아쉽다.

 

- 기능 설명의 나열

: 차근 차근 공부하려는 분들에게는 좋을 수도 있는 부분인데

바로 뭔가 만들면서 공부하는 것을 좋아하는 사람에게는 조금 아쉽다.

사전처럼 필요한 부분을 찾아서 보기에 좋을 수도 있기는 한데...

이 책만 가지고 리액트를 공부하기에는 조금 아쉬울 수 있을 것 같다.

 

[ 총평 ]

- 리액트를 공부하기 시작했다면 꼭 갖고 있기를 추천

클론 코딩과 같은 강의를 들으면서 보면 더더욱 많은 도움이 될 것 같다!

 

 

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

 

서평 전체 내용은 아래 링크에서 보실 수 있습니다.

https://www.whatwant.com/entry/Learning-React-2nd

 

 

[좋았던 점]

1- 물 흐르는 듯이 읽히고 재미있게 보기 좋았다

챕터마다 단계적으로 빌드업이 잘 이어져 있어서 끝까지 술술 읽혔다. 
마치 강의 잘하시는 교수님은 수업 중 어쩌다 하는 가벼운 농담처럼, 유머들이 과하지 않고 내용과 연관되어 있었다.
( '기술서는 기술만 말해야 하지. 괜히 별 내용이 없이 책만 무거워 지는거 아닐까?'라는 편견을 내려 놓게 된다. ) 

2-리액트의 그동안의 변화와 앞으로를 예상 해 볼 수 있다

초기에 프로그래밍을 하다보면 왜 같은 역활인데 여러 개의 방식이 있나 혼란스러운데, 역사를 알면 받아들이기가 더 수월하다. 그리고 앞으로 어떤 것들이 사라지거나 대체 될지도 알아 두는게 실무를 하는데 몹시 도움이 될 수 있다. 그런 포인트들을 잘 짚어주는게 이 책의 가장 큰 장점이 될 수 있다.

특히 Ch9 Suspense 에서는 책 문구부터 "9장은 이 책에서 상대적으로 가장 덜 중요한 장이다."라고 시작한다. 이런 시원시원한 점이 이 책의 매력이 아닌가 싶다. (그러나, '덜 중요하니 쓰지 말아요.'가 아닌 '모든 내용이 나중에 달라질 수 있다.'라는 의미이다.)

[주의사항]

- 리액트를 처음 접하기 위해 본다면, 자바스크립트의 객체, 배열, 함수 정도는 알고 있어야 한다.

ch2, ch3에서 ES6 이후의 자바스크립트(JS), 함수형 프로그래밍을 다루고 있는데 (~p91, 책1/4분량) 더 기초적인 JS 부분은 별도의 교재나 자료로 학습을 하고 진행하는게 책을 잘 활용할 수 있다.

 [아쉬운 점]

ch10 TDD, ch12 서버에 관한 내용은 많이 다뤄지지 않아서 아쉬웠다. 어려운 부분인 만큼 물론, 상대적으로 많이 다룰 수도 없을 것 같긴 하다. 리액트와 관련되어 여러 전반적인 영역을 짚어주는 것에 의의를 두었다.

 

 

 

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

책을 읽기 전에

평소 리액트는 타 웹 프레임워크보다 딱딱하고 체계적이라는 인상을 가지고 있었기 때문에, 이러한 내용을 다루는 데는 역시 믿음의 동물책만한 것이 없다는 생각이 들었습니다.

최신 ES 문법부터 시작

이 책은 모던 자바스크립트 및 ES에 대한 기초적인 이해를 전제하고 내용을 서술하고 있으므로, 입문자보다는 타 프레임워크에서 이를 다루어 본 적이 있거나 관련 기반 지식을 가지고 있는 사람에게 권장하고 싶습니다.

단순 구동이 아닌 밑바닥까지 파헤치는 책

일부 웹 프론트엔드 관련 전공서적의 경우 프로젝트 위주의 실습서를 표방하며 근원적인 동작 원리나 내부 구조에 대해서는 간략하게 다루고 넘어가는 경우가 많은데, 이 책에서는 리액트라는 프레임워크가 브라우저 내에서 어떤 과정을 거쳐 작동하는지까지 철저하게 다루고 있습니다.

상태관리, 테스트, 라우팅까지

또한 개발 과정에서의 체계적인 구조화와 모듈화, 설계가 무엇보다 중요한 프레임워크인 만큼, 작성한 코드에 대해 책임을 질 수 있도록 상태관리 패턴이나 테스트 방법 등을 함께 철저하게 기술하고 있습니다.

 

LearningReact2판_축소.jpg

 

 

O'REILLY에서 나온 Learning React의 2판입니다.

   개정할 때 리액트 팀이 추천하는 현재 우수 사례에 초점을 맞추려고 노력했다고 합니다. 그리고 이미 사용이 중단된 리액트 기능도 몇 가지 공유하고 있다고 합니다. 그 이유는 옛날 스타일로 작성되었지만 여전히 잘 작동하고 유지 보수되는 리액트 코드도 많이 있기 때문이라고 합니다. 이러한 옛날 기능은 별도의 박스로 표시한다고 합니다.

   책의 초반에서는 리액트에 대해서 알려주기 전에 리액트를 활용하기 위해서 알아야 할 자바스크립트에 대해서 소개합니다. 그 이후에 리액트에 대해서 알려주는데 우선 컴포넌트들에 대해서 알려주고, 컴포넌트 트리를 JSX(Java Scritp + XML) 그리고 아래의 훅스 및 커스텀 훅들을 차례대로 소개합니다.

- useState

- useRef

- useContext

- useInput

- useColors

- useEffect

- useLayoutEffect

- useReducer

- useCallback

- useMemo

 

   책에서는 기본 구성요소들 외에도 리액트 라우터, 테스트, 서버 랜더링 등에 대해서도 설명합니다. 기초에 대한 부분부터 활용에까지 소개하기 때문에 입문자가 이 책을 보고 시작하고 바로 활용할 수 있는데 도움을 줍니다.

 

 

 

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

 

결제하기
• 문화비 소득공제 가능
• 배송료 : 2,000원배송료란?

배송료 안내

  • 20,000원 이상 구매시 도서 배송 무료
  • 브론즈, 실버, 골드회원이 주문하신 경우 무료배송

무료배송 상품을 포함하여 주문하신 경우에는 구매금액에 관계없이 무료로 배송해 드립니다.

닫기

리뷰쓰기

닫기
* 도서명 :
러닝 리액트(2판)
* 제목 :
* 별점평가
* 내용 :

* 리뷰 작성시 유의사항

글이나 이미지/사진 저작권 등 다른 사람의 권리를 침해하거나 명예를 훼손하는 게시물은 이용약관 및 관련법률에 의해 제재를 받을 수 있습니다.

1. 특히 뉴스/언론사 기사를 전문 또는 부분적으로 '허락없이' 갖고 와서는 안됩니다 (출처를 밝히는 경우에도 안됨).
2. 저작권자의 허락을 받지 않은 콘텐츠의 무단 사용은 저작권자의 권리를 침해하는 행위로, 이에 대한 법적 책임을 지게 될 수 있습니다.

오탈자 등록

닫기
* 도서명 :
러닝 리액트(2판)
* 구분 :
* 상품 버전
종이책 PDF ePub
* 페이지 :
* 위치정보 :
* 내용 :

도서 인증

닫기
도서명*
러닝 리액트(2판)
구입처*
구입일*
부가기호*
부가기호 안내

* 온라인 또는 오프라인 서점에서 구입한 도서를 인증하면 마일리지 500점을 드립니다.

* 도서인증은 일 3권, 월 10권, 년 50권으로 제한되며 절판도서, eBook 등 일부 도서는 인증이 제한됩니다.

* 구입하지 않고, 허위로 도서 인증을 한 것으로 판단되면 웹사이트 이용이 제한될 수 있습니다.

닫기

해당 상품을 장바구니에 담았습니다.이미 장바구니에 추가된 상품입니다.
장바구니로 이동하시겠습니까?

자료실