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

한빛출판네트워크

러닝 리액트

리액트와 리덕스로 구축하는 효율적인 웹 UI

한빛미디어

집필서

판매중

  • 저자 : 알렉스 뱅크스 , 이브 포셀로
  • 번역 : 오현석
  • 출간 : 2018-02-13
  • 페이지 : 420 쪽
  • ISBN : 9791162240373
  • 물류코드 :10037
초급 초중급 중급 중고급 고급
4.4점 (7명)
좋아요 : 17

페이스북의 노하우와 모던 자바스크립트를 내 품 안에

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

 

 

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

페이스북이 2013년 처음 공개한 리액트는 개발자가 재사용 가능한 UI를 생성하도록 지원하는 자바스크립트 라이브러리다. 특히 2015년에 공개된 리액트 네이티브의 등장에 힘입어 리액트는 웹뿐만 아니라 모바일까지 아우르는 프레임워크로 자리 잡았다.

 

이 책은 여러분이 리액트에 대해 잘 모른다고 가정하고, 맨 밑바닥부터 차근차근 소개한다. 또한 최신 자바스크립트(ES6)의 핵심을 설명하고, ES6를 활용한 함수형 프로그래밍에 대해 소개함으로써 리액트 프로그래밍에 필요한 기초를 다져준다. 4장까지는 JSX를 사용하지 않는 순수 리액트 프로그램을 통해 리액트가 실제로 어떤 일을 하는지 내부 구조를 보여주고, 5장부터는 JSX를 사용하는 리액트로 넘어가서 리액트 프로퍼티와 상태 관리, 컴포넌트 트리의 구성과 컴포넌트 확장에 대해 다룬다. 또한 리덕스와 테스팅, 리액트 라우터, 아이소모픽 프로그래밍 등 리액트를 사용한 애플리케이션 개발에 꼭 필요한 여러 개념을 이해하기 쉬운 예제를 통해 잘 설명해준다. 

 

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

저자

알렉스 뱅크스

캘리포니아 교육과정 개발업체 Moon Highway의 소프트웨어 엔지니어이자 강사며 공동설립자다. 소프트웨어 컨설턴트로서 MSN, 시카고 마라톤, 미국 에너지부(DOE) 등을 위한 애플리케이션을 개발했다. 야후의 신입사원을 위한 커리큘럼 개발을 지속적으로 도왔으며, 온라인 교육사이트 린다닷컴(Lynda.com)에 몇몇 수업을 개설했다.

저자

이브 포셀로

캘리포니아 교육과정 개발업체 Moon Highway의 소프트웨어 아키텍트이자 공동설립자다. 마이크로소프트와 1-800-Dentist를 위한 소프트웨어 프로젝트에 몸담기도 했다. 활동적인 강사이자 저술가로 스탠퍼드 대학교, 페이팔, 이베이, 린다닷컴 등에서 자바스크립트와 파이썬을 강의했다.

역자

오현석

KAIST에서 전산학 학사와 석사 학위(프로그래밍 언어 연구실)를 취득했다. 삼성메디슨, 비트앤펄스 등에서 UI 개발자와 개발 팀장을 지냈고, 호주에서 프리랜서 C++/풀스택 개발자로 일하고 있다. 웹이나 모바일 등의 분야에서 값 중심의 프로그래밍을 통해 오류 발생 가능성이 더 적으면서 유지보수가 편한 프로그램을 작성하는 방법과 이를 지원하는 여러 도구를 만드는 일에 관심이 많다. 최근에는 스칼라와 파이썬을 사용한 대규모 병렬 처리나 액터를 활용한 분산 처리 등을 공부하는 중이다. 『Programming in Scala (Second Edition) 한국어판』, 『스칼라 동시성 프로그래밍』(이상 에이콘), 『시스템 성능 분석과 최적화』(위키북스) 등을 번역했다.

CHAPTER 1 리액트 소개

1.1 장애물

1.2 리액트의 미래

1.3 변화하는 기술 계속 따라잡기

1.4 예제 파일 사용법

 

CHAPTER 2 최신 자바스크립트

2.1 ES6에서 변수 선언하기

2.2 화살표 함수

2.3 ES6 트랜스파일링

2.4 ES6 객체와 배열

2.5 프라미스

2.6 클래스

2.7 ES6 모듈

2.8 커먼JS

 

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

3.1 함수형이란?

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

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

 

CHAPTER 4 순수 리액트

4.1 페이지 설정

4.2 가상 DOM

4.3 리액트 엘리먼트

4.4 ReactDOM

4.5 자식

4.6 데이터로 엘리먼트 만들기

4.7 리액트 컴포넌트

4.8 DOM 렌더링

4.9 팩토리

 

CHAPTER 5 JSX를 사용하는 리액트

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

5.2 바벨

5.3 조리법을 JSX로 작성하기

5.4 웹팩 소개

 

CHAPTER 6 프로퍼티, 상태, 컴포넌트 트리

6.1 프로퍼티 검증

6.2 참조

6.3 리액트 상태 관리

6.4 컴포넌트 트리 안의 상태

 

CHAPTER 7 컴포넌트 개선하기

7.1 컴포넌트 생애주기

7.2 자바스크립트 라이브러리 통합

7.3 고차 컴포넌트

7.4 리액트 밖에서 상태 관리하기

7.5 플럭스

 

CHAPTER 8 리덕스

8.1 상태

8.2 액션

8.3 리듀서

8.4 스토어

8.5 액션 생성기

8.6 미들웨어

 

CHAPTER 9 리액트 리덕스

9.1 스토어를 명시적으로 전달하기

9.2 컨텍스트를 통해 스토어 전달하기

9.3 표현 컴포넌트와 컨테이너 컴포넌트 비교

9.4 리액트 리덕스 프로바이더

9.5 리액트 리덕스 connect

 

CHAPTER 10 테스팅

10.1 ESLint

10.2 리덕스 테스트하기

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

10.4 스냅샷 테스팅

10.5 코드 커버리지 사용하기

 

CHAPTER 11 리액트 라우터

11.1 라우터 사용하기

11.2 경로 내포시키기

11.3 라우터 파라미터

 

CHAPTER 12 리액트와 서버

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

12.2 유니버설 색 관리 애플리케이션

12.3 서버와 통신하기

★ 옮긴이의 말 중에서

리액트를 사용하면 UI 컴포넌트를 정의하고 선언적으로 활용해 UI를 구축하고 제어할 수 있다. 리액트 라이브러리 자체는 비교적 간단한 UI 라이브러리라고 할 수 있지만, 리액트를 뒷받침하는 합성성과 관심사 분리, 데이터 흐름 방향의 단순화 등은 UI뿐만 아니라 다양한 응용 분야에서 활용할 수 있는 좋은 아이디어다. 이 책은 기본적인 ES6부터 시작해서 차근차근 리액트의 여러 아이디어를 설명하며 이해에 방해가 될 수 있는 곁가지를 최대한 줄이고 꼭 알아야 하는 내용 위주로 전개한다. 이 책을 통해 리액트의 핵심 요소를 잘 이해하고 나면 리액트 공식 문서나 자세하고 복잡한 리액트 내용을 더 쉽게 이해하고 여러분 자신의 프로젝트에 리액트를 잘 활용할 수 있을 것이다.

 

 

★ 주요 내용

● 자바스크립트로 주요 함수형 프로그래밍 개념 학습하기

● 브라우저에서의 리액트 동작 방법 이해하기

● 리액트 컴포넌트를 탑재 / 배치하여 앱 프레젠테이션 레이어 생성하기

● 컴포넌트 트리로 데이터를 관리하고 앱 디버깅 소요시간 단축하기

● 리액트 컴포넌트의 생명주기를 이해하여 데이터 로드와 UI 성능 개선하기

● SPA에서 방문 기록, 북마크 등 브라우저 기능을 사용하기 위한 라우팅 솔루션

  • 나는 예전 회사에서 자바스크립트로 게임데이터 관련 툴을 만드는 일을 했었다. 추가 구현이 많아질수록 구조적 프로그래밍과 객체지향 프로그래밍 사이의 어중간한 영역에 있었던 코드는 점점 길어지고 관리 불가능해져갔다. 기능 단위로 툴을 쪼개도 기본 패러다임은 동일했기 때문에 하나의 수정사항을 반영하려면 여러 부분을 들여다보고 서로 영향을 끼치는 부분을 계속 조정해야 했다.

     

    이직한 회사에서 리액트, 그리고 ES6 의 문법을 처음 접했을 때 처음에는 너무 적응이 되지 않았다. 익숙했던 방법으로 웹툴을 만들어갔을 때 TD님이 하신 말씀은 '기존 툴 안에서도 충분히 만들 수 있을 것 같으니, 다시 해보라.' 는 것이었다. 예전에도 리액트 책을 본 적은 있었지만 제대로 정리되지 않는 부분이 많았다. prop 과 state 는 왜 다른지, 왜 가능하면 let 대신 const 를 써야 하는지, 애초에 함수형 언어는 왜 쓰는지... 등의 의문은 계속 남아 있었다.

     

    반 년 정도 시간이 지나며 기존에 작성되어 있던 코드들을 트래킹하면서 어느 정도 문법에는 익숙해졌지만, 동작 원리에 대해서는 아직 의문이 많은 상태였다. 이때 한빛미디어의 '나는 리뷰어다'에 응모했고, 기대했던 <러닝 리액트> 책에 당첨되었다. 

     

    책을 보니 의문점이 많이 해소되었다. 물론 지금까지 현업에서 관련된 코드를 접했기 때문에 이해가 빠른 것일수도 있다. 하지만 일단 그런 점을 제쳐두고라도 2장 '최신 자바스크립트', 3장 '자바스크립트를 활용한 함수형 프로그래밍'은 지금까지 접했던 대여섯 권의 책들 중 가장 간결하면서도 정확하게 문법에 대해서 설명해주고 있었다. 실무에서 리액트를 안 쓰더라도 ES6 가 필요하다면 이 부분만 참고해도 도움이 될 듯 하다.

     

    그 뒤의 내용은 리액트에 대해 본격적으로 설명하고 있다. 4-6장 초반은 요리 레시피, 6장 중반-10장은 색 관리 리스트라는 주제로 하나의 프로그램이 어떻게 개선될 수 있는지를 꾸준히 설명하고 있다. 가끔씩 설명이 없으면 엄청 헷갈릴 수 있는 문법이 있는데 (jsx 의 props를 스프레드 연산자를 사용해서 넘기는 부분 등) 그런 부분들에 대해서도 빠짐없이 설명이 되어 있어서 저자들의 꼼꼼함을 느끼게 한다.

     

    예제 코드도 github 에 올라와 있고, 한글판에 대해서는 역자가 별도로 repo 를 만들고 추가로 자세하게 설명을 해놓고 있어서 하나하나 트래킹해볼 사람에게는 많은 도움이 될 것 같다. 오래된 책들의 예제 코드를 보면 최신판과 맞지 않는 점도 많은데 한글판 repo 는 리액트16 에 따라 원래 repo 의 코드를 수정한 부분도 있다. 그리고 번역에 이상한 단어가 없고 순수 한글을 고집하지 않으며 일반적으로 통용되는 용어를 사용해서 매끄럽게 읽히는 것도 장점이다. 

     

    리액트에 대해서 본격적으로 공부하려면 더 두껍고 내용이 많은 책과 예제가 필요할 것 같지만, 입문서로는 꽤 괜찮아보인다. 사실 책 한 권을 읽고 어떤 내용에 대해서 모든 것을 알기는 힘든 일이다. 그래도 가이드가 필요하다면 이 책은 꽤 안정적인 선택일 것 같다.

  • 최근 프론트엔드 분야 웹 개발을 하려면 공부해야할 게 너무 많다. 이럴수록 기초를 잘 쌓아놔야 한다는 생각이 든다.

    자바스크립트라는 Node.js 가 나오며 브라우저에서뿐 아니라 운영체제 위에서도 작동이 가능해졌다. 이 후로 자바스크립트는 엄청 발전했다. 특히 12년 중반 Angular.js에 구글이 참여하고 facebook에서 react를 프로젝트에 참여하면서 기업형 오픈소스 형식으로 진화했다. 기업형 오픈소스는 오픈소스와 기성품의 장점을 합친 것 같다.

    10년 전이라면 C, JAVA만 잘해도 괜찮았다면 현재는 Javascript를(Typescript) 공부해둬야 할 것 같다. 가장 수요가 많고 할 수 있는 범위가 넓어진다. 그리고 react 나 angular 등을 통해 Javascript의 단점들을 커버하면 퍼포먼스를 뽑을 수 있는 사람이 될 수 있을 것이다.

    이 책의 첫 느낌은 "꼼꼼하다"였다. 그리고 책을 다읽은 지금 책의 느낌은 "친절하다" 다.
    신기술은 필연적으로 익숙하지 않다. 거기에 더해 필요성을 모르면 다가오지 않는다. 이 책을 친절하다라고 여긴 이유는 각 장의 시작을 서술하며 해당 개념이 어떻게 개발자들한테 다가오는 지, 필요 한지를 설명한다. 예를 들어 순수 리엑트 파트에서 순수 기존 javascript의 경우 함수의 매개변수로 사용한 변수가 바뀔 수 있어서 디버깅이 힘들다는 문제점을 확실히 설명해주고 순수리엑트 방식을 설명해주는 식이다. 이런 식의 설명은 독자가 왜 이 새로운 개념을 받아들여야하는 지에 대한 내면적 고민을 할 필요를 줄여든다. 그리고 각 개념들은 그냥 설명만 한게 아니라 예제 코드를 통해 보여준다. 전체 코드는 github을 통해 공개해놓았다. (이 코드는 출판사에서 한글로 고친 버전도 제공해준다.) 그리고 동시에 React 개발에 도움이 되는 개발자 도구들도 알려준다.

    다음은 책을 읽으면서 메모를 한 React의 장점들이다. 

    • React는 라이브러리로 기존 javascript의 단점을 개선해주는 방향으로 개발 되었다.
    • React를 사용하면 자바스크립트 안에서 HTML처럼 보이는 코드를 작성할 수 있고 DOM에서 생기는 모든 문제를 해결하면서도 다루기 쉽고 예상치 못한 동작으로 개발자를 놀라게 하는 일도 없다. (먼가 든든해진다.)
    • 함수형 프로그래밍은 선언적 프로그래밍(프로그래머가 쉽게 추론할 수 있는 코드)을 도와준다. (map, reduce)
    • 순수함수(파라미터에 의해서만 반환값이 결정되는 함수)는 테스트 하기 쉽다.
    • 트랜스 파일링으로 브라우저에 종속되는 문제 해결
    • React는 뷰를 만들기 위한 라이브러리, ReactDOm은 UI를 실제로 브라우저에 랜더링
    • HTML은 브라우저가 문서 객체(DOM)을 구성하기 위해 따라야 하는 절차

     

    개인적으로 웹 개발을 시작하는 입장에서 이책을 2,3 번 읽어봐야할 것 같다.
    첫 독서에선 전체적인 개념을 이해하고 왜 사용하는 지에 대해 공감하는 게 우선이었다. 이제 코드를 직접 따라치며 React로 개발 해봐야겠다. 글로 이해한 것과 직접 코딩하며 겪는 경험은 천지 차이다. 그래도 첫 독서에서 React가 정말 매력적이다는 생각을 했지만, 좋은 코드가 뭔지에 대해 주워듣고 느낀 게 없다면 우선 코드 중심으로 따라치는 것을 추천하고 싶다. 아직 최신 책이라 그런지(너무 스팩이 자주 바뀐다.) 예제가 맞게 돌아간다. 얼른 기초를 닦아야 겠다.

  • O'REILLY에서 출판된 Learning React의 한글판을 보게 되었다. 프로그래밍 개발 언어뿐만 아니라 공부하고자 하는 것이 있다면 인터넷 검색을 통해서 충분히 공부할 수 있는 자료를 얻어낼 수 있지만 아무래도 사전 지식이 필요하고 전제척인 개념을 잡는 것이 중요한 경우는 여전히 잘 구성된 책의 도움이 여러모로 효율적이다.

     

    인터넷 등을 통해 자료를 찾아서 공부하게 되는 경우 도대체 무엇을 얼마큼 알아야 하는지 감이 잘 잡히지 않아 무턱대고 이것저것 찾아서 익히려다 보면 시행착오를 겪게 되기도 하고 잘 정리가 되지 않아 흐름이 잘 이어지지 않는데 러닝 리액트의 경우 대략 전체 내용의 1/4 정도를 들여 본격적으로 리액트를 공부하기 전에 알아두어야 할 배경 지식들을 정리해 준다. 이 부분이 큰 도움이 되었다.

     

    책을 읽으면서 직접 코드를 실행해 보는 것도 중요한데, 잘 정리된 한글판 github 소스 Repository 덕분에 해설만으로는 잘 이해가 가지 않는 부분의 경우 코드를 얻어 코드를 수정해보기도 하면서 공부하기에도 용이했다. 개념을 설명하기 위해 소개되어 있는 코드들이 복잡하지 않고 단순하게 구성되어 있어 개념을 이해하는데도 좋았다. 

     

    책을 받아본지 2주 정도 되었는데 아직까지 모두 다 보지는 못하고 대략 60% 정도 진도를 나간 상황인데 지금까지는 책의 덕을 톡톡히 잘 보고 있다. 무엇보다 번역 자체도 매끄러워서 마음에 들고, 옮긴이의 주석들도 요소요소 잘 배치되어 있다.

     

    마지막으로 공부하다가 도무지 이해가 되지 않는 부분이 있어 염치 불고하고 번역자이신 오현석 님께 이해가 되지 않는 부분에 대해 이메일로 문의를 했었는데 매우 친절하게 궁금한 내용을 풀어서 설명해주셔서 감동했다. :)

     

    이 책의 목표는 리액트와 관련 있는 모든 요소를 제대로 된 순서로 배열하여 리액트를 배우는 과정에서 발생할 수 있는 혼란을 피하고 리액트를 더 잘 배울 수 있는 토대를 만드는 것이라는 책의 소개가 있는데 효율적으로 그 목표대로 순항하고 있어 만족한다.

  • 지난달에 이어서 한빛미디어 리뷰어 프로그램에 선정되었다. 원래는 데이터나 머신러닝 관련한 책들을 원했었지만, 요즘 어떻게 내가 리액트를 본업으로 전환했다는 것을 알았는지, 리액트 책이 배정되었다. 원래 Java 서버 개발자와 iOS 클라이언트를 주력으로 하던 내가 작년에 큰 도전을 하기로 결심한다. 사용하는 언어를 Javascript로 바꾸고, 주력하는 플랫폼을 웹으로 전환하면서 나에게도 많은 혼란이 찾아왔다.

     

    Swift로 개발을 하던 시절, 재밌는 프로젝트가 있었는데 그것은 바로 ReSwift 였다. 이 책의 또 다른 주제인 Redux의 Swift 버전인 셈이다. 비록 약 3개월간 사용하다가 iOS 플랫폼에는 그렇게 맞지 않는다는 생각을 하게 된 뒤에 더 이상 사용하지 않게 되었지만, 부족했던 ReSwift 의 도큐먼트에 비해 Javascript 진영에서의 Redux. 그리고 더 나아가 React에 대한 찬사는 여기저기서 찾아볼 수 있는 계기가 되었다.

     

    그렇게 충분한 준비를 하지 못한 체 React로 개발을 하려니 여간 힘든 일들이 많았고, 특히나 너무나 빠르게 변화하였던 ES6부터의 문법 덕택에 원래부터 부족했던 Javascript의 기본지식에 더더욱 혼란스러웠다. 책을 여러 번 읽고, 또 공식 홈페이지에 가서 여러 문서를 보았지만 완전히 손에 익는 데에는 참 오랜 시간이 걸리고 있다.

    그러던 와중에 만나게 된 믿고 보는 OREILLY책. 러닝 리액트. 완독하고 나니 역시나 재미없는 책 구성이지만, 다 읽게 되면 뿌듯해지는 마음이다.

    img_xl.jpg

    이 책의 구성은 크게 4가지 정도로 나눌 수 있다.

    1. 최신 Javascript 트렌드의 코딩 기법

    2. React.

    3. Redux.

    4. 기타 좋은 코딩 기법 (테스팅, 라우터, 서버 랜더링)

     

    나처럼 타 언어에서 React로 바로 넘어온 사람들에게 추천할만한 구석이 많은 구성이다. 일단 ES6 이전 시대의 문법들을 졸업하는 부분들이 초반에 주되게 나오는데, 실제로 코딩을 하면서 바꿔주면 좋은 것들이 많다. 당연히 최신 언어니까 최신 트렌드를 반영하고 있다. 특히 챕터 3에서 나오는 함수형 프로그래밍에 대한 예제들은 좋은 예제들이 많다. 최근 모든 언어들이 함수형 언어로 탈바꿈하고 있는 트렌드에 맞춘 좋은 챕터. 개인적으로는 조금 더 내용이 많았으면 어땠을까 싶다.

    img_xl-2.jpg

    다음부터 이어지는 React에 대한 설명은 지금 현재 프로덕트 레벨에서 사용하는 기법들로 채워져 있다. 특히 생애주기에 대해서 헷갈리는 부분들이 많은데 'CAUTION' 박스로 구성된 팁들이 정말 꿀팁들이다. 코딩하면서 실수 있던 부분들을 많은 양 지적해주고 있다. (사실 지금도 매번 잘 틀리기도 한다.)

     

    img_xl-3.jpg

     

    img_xl-4.jpg

    다음은 Redux 에 대한 설명과 React와 어떤 식으로 합쳐서 사용할 수 있는지를 예제를 통해 보여주고 있다. State 머신에 가까운 Redux 에 대한 다이어그램들이 페이지마다 잘 구성되어 있어서 이해하기 간편했다. 

    img_xl-5.jpg

     

    img_xl-6.jpg

     

    img_xl-7.jpg

    이 책에서 가장 나의 가려운 부분을 해결해줬던 부분은 위에 목차 중에 4번 항목이다. 평소에 Javascript 에서의 테스팅은 어떻게 하는지 궁금한 부분들을 해결해줬고, 특히 이미 다른 개발자가 도입해서 사용하고 있던 React-Router에 대해서도 마땅하게 설명해주는 책을 만나기 어려웠는데, 간단하게나마 설명해주고 있다. 실제로 적용했을 때에 이 책을 만났더라면 더 쉽게 적용할 수 있었을 것으로 보인다. 

    img_xl-8.jpg

    그리고 마지막 챕터는 사실 약간 아쉽다. Javascript를 사용하면서, 가장 놀라웠던 부분은 서버와 클라이언트의 언어가 같아서 생기는 유니버셜에 있었다. 특히나 책에서 살짝 설명되었던 아이소모피즘은 평소 서버와 클라이언트를 전혀 다른 언어로만 개발해왔던 나에게는 굉장히 신선하게 다가왔다. 서버 랜더링이라는 생소한 개념을 설명해주기엔 약간 분량과 예제가 적다는 기분이 든다. 하지만 끝 챕터답게 난의도는 무척이나 올라가 있어서, 오히려 간단한 예제로 조금씩 보여주는 부분이 추가적으로 있었다면 어땠을까 하는 아쉬움이 든다.

    img_xl-9.jpg

    내가 참여하는 개발에서는 아쉽게도 Redux의 전신 중에 하나인 Alt를 사용하고 있다. 하지만 만약에 트렌드를 따라 Redux로의 이전을 준비한다면, 이 책을 다시 펴볼 수 있을 것 같다.

     

    이 책은 나처럼 Javascript를 조금 예전에 해보았거나, React 시대 이전을 알던 사람들에게 참 유용하고 좋은 예제가 되어주는 책이다. 좀 더 많은 분량으로 여러 부분들을 더 설명해 줄 수 있다면 더 좋았겠지만, 이 정도로도 역시나 믿고 읽는 OREILLY와 한빛미디어의 책이다. 

  •  함께 일하는 동료의 소개로 한빛 미디어의 나는 리뷰어다 프로그램에 참여하였다. 현재 MSA 기반의 서비스를 개발하고 있는데, 프론트엔드는 React 프레임워크를 이용하여 개발 하고 있다. 처음에 백엔드와 프론트엔드를 나눠서 팀을 구성하였고, 나는 spring boot와 java 8를 이용한 서버개발을 진행했다. 최근에 백엔드와 프론트엔드를 도메인 서비스 기준으로 팀을 합쳤고, 페어를 통해서 백엔드, 프론트엔드를 함께 개발을 진행하게 되었다.

     

    React를 통해서 프론트엔드 개발은 처음이었고, 페어를 진행하면서 동료 개발자의 조언과 스터 디를 통해서 개발을 진행할 수는 있었지만 React에 개념에 대해서는 제대로 알지 못해서 아쉬웠다. 이번 기회에 Learning React를 읽으면서 그런 부족했던 개념을 채울 수 있어서 만족스러웠다.

     

    책의 구성

     책은 먼저 리액트 소개, ES6의 문법, 함수형 프로그래밍을 소개한다. 이전에 ES6 문법을 모르는 개발자가 보기에는 좋은 챕터이다. 하지만 큰 개념들은 짧은 페이지에서 간단하게 설명하고 넘어가는 점들은 아쉽다. 특히 커링, composition의 경우 좀더 많은 설명을 했더라면, 이해하고 활용하기 편했을텐데 아쉽다.

     

    중반부로 가면서 React의 컴포넌트 설명, 라이프사이클, Redux를 이용한 상태관리 개념들은 예제와 함께 있어서 이해하기 편하고, 실제 업무에 적용하기에 무리없이 잘 설명되어 있다. 책에 전반적으로 아쉬운 점은 개념 설명을 위해서 작은 예제들을 단위로 설명을 하는 점이다. 이 책을 읽고 나면 프로젝트가 이미 만들어져 있고, 기능들을 추구하는 상황에서는 빠르게 적용할 수 있을 것 같다. 하지만 프로젝트를 구성하고, 아무것도 없는 상황에서 React를 통해서 app을 만들어가는 과정에서 도움이 되는 팁들은 적은 점이 아쉽다. React의 개념을 잡고 개발하는데 필요한 개념을 예제를 통해서 잡기에 좋은 책인 것은 분명하다.

     

    책에 후반부로 가면 jest와 enzyme을 통한 테스팅 부분에 대한 설명이 있다. 개인적으로 가장 아쉬웠던 챕터다. 실제 일을 할때 코드 품질을 올리기 위해서 TDD나 BDD등의 테스트 주도 개발을 하는 경우가 많다. (물론 BDD는 사용자 스토리 기반의 테스트 주도 개발 이라는 점에서 TDD와 동일하지는 않다.) mocha, chai등을 이용한 예제가 더 많거나 아니면 enzyme을 통해서 컴포넌트의 event를 발생 해서 테스트케이스를 작성하는 등 실무에 더 도움이 되는 팁들이 더 많았다면 좋았을텐데 아쉬 움이 남았다. 실제로 react개발시 enzyme은 너무 막강한 모듈이라 enzyme을 통해서 단위테스트 케이스를 꼼꼼하게 짠다면 GUI 테스트를 하지 않더라도 제품의 완성도를 높일 수 있기 때문이다. 다른 입문하는 개발자들도 장점을 더 느꼈더라면 많은 도움이 되었을텐데 아쉬움이 있었다. 마지막로 react-router와 node 서버에서 렌더링 관련된 내용이 구성되며 마무리 된다.


    마무리

     React에 대한 개념이 부족하거나 입문자에 도움이 많은 책이다. 실제 개발시에 사용하는 다양한 부분에 대해서 예제와 함께 설명해서 만족스럽다. 하지만 반대로 너무 많은 부분들을 설명하기 때문에, 책의 구성을 좀 더 단순화하고 깊이 있게 설명하는 부분이 있었으면 더 좋지 않았을까라는 아쉬움도 남는다. 그리고 프로젝트 구성부터 App을 점차 완성해가면서 개념설명을 예제와 함께 했다면 실무에 적용하기 더 좋지 않았을까하는 생각이 든다. 그럼에도 ES6 문법도 모르고, React로 프론트엔드 개발을 처음하는 동료들에게 추천하고 싶은 책은 분명하다.

     

  • 해당 책은 리액트뿐만 아니라 리액트를 제대로 이해하기 위한 자바스크립트와 관련있는 전반적인 내용을

    시작으로하여 리액트, 리덕스, 테스팅등 실제 업무에서 사용할수 있는 기본적인 내용들을 담고 있습니다. 

    따라서, 리엑트를 실무에 적용하거나 다시한번 제대로 내용을 보고 싶은 개발자들에게 추천을 드립니다.

     

    * 장점

    - 리엑트 뿐만 아니라 자바스크립트 ES6 문법에 대한 소개, 함수형 프로그래밍 소개등 전반적인 지식을 포함하고 있습니다.

    - 책의 구성이 쉽게 되어 있습니다 순수리엑트에서 부터  프로퍼티, 데이터 흐름, 리덕스 등 리엑트를 가장 쉽게 익힐 수 있도록 단원구성이 되어 있습니다. 

    - 번역서지만 이해하기 쉽게 잘 번역이 되어 있습니다. 

     

    * 단점

    - 전부 다는 아니지만 중간중간에 있는 샘플 소스 코드 중에 다소 복잡해 보이는 코드들이 있었고, 예제 코드에 대한 설명이 개인적으로는 부족하다고 생각이 들었습니다.

     

    * 총평

    서버개발과 약간의 Front-End로 업무를 진행하다가 최근에 리액트를 사용하게 되었는데, 

    해당 책을 통해서 원리에 대해서 잘 알지 못하고 기계적으로 사용하던 부분들에 대해서 다시 한번 알게 되어 많은 도움이 되었습니다.

     

     

     

  • 리액트에 내포된 핵심적인 개념들을 두루두루 설명하고 있습니다. ES6부터 차근차근 설명하면서 빌드업하고있는데 처음부터 건너뛰지 말고 정독하기를 권장합니다. 페이지가 많지는 않지만 곁가지를 줄이고 간략하게 서술하였기 때문에 내용이 어렵게 느껴질수도 있다고 생각합니다.

     

    여타 다른 리액트 서적에서는 프로덕션 수준의 리액트 개발과정에서 자주 사용되는 다양한 도구들에 대하여 자세한 설명을 생략하는 경우가 종종 있는데  이 책은 핵심적인 내용은 반드시 언급하고 넘어갑니다. 예제가 풍부하다거나 친절이 상세한 것은 아니기 때문에 입문서로는 적당하지는 않습니다. 초반에 ES6 를 소개한 후 예제소스에 적극 사용하기 때문에 ES6 코드에 적응하는데는 도움이 될 것 같습니다.

결재하기
배송료 : 0원배송료란?

배송료 안내

  • 책, 아이템 등 상품을 3만원 이상 구매시 무료배송
  • 브론즈, 실버, 골드회원이 주문하신 경우 무료배송

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

닫기

리뷰쓰기

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

* 리뷰 작성시 유의사항

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

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

오탈자 등록

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

도서 인증

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

* 회원가입후 도서인증을 하시면 마일리지 500점을 드립니다.

* 한빛 웹사이트에서 구입한 도서는 자동 인증됩니다.

* 도서인증은 일 3권, 월 10권, 년 50권으로 제한됩니다.

* 절판도서, eBook 등 일부 도서는 도서인증이 제한됩니다.

닫기

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

자료실