확장메뉴
주요메뉴


소득공제 강력추천
미리보기 공유하기

Do it! 리액트 프로그래밍 정석

: 실리콘밸리 개발 방법으로 배우는

도서 제본방식 안내이동 이지스퍼블리싱-Do it! 시리즈이동
리뷰 총점8.5 리뷰 11건 | 판매지수 2,043
베스트
IT 모바일 top100 8주
정가
36,000
판매가
32,400 (10% 할인)
YES포인트
신상품이 출시되면 알려드립니다. 시리즈 알림신청
소중한 당신에게 5월의 선물 - 산리오 3단 우산/디즈니 우산 파우치/간식 접시 머그/하트 이중 머그컵
월간 개발자 2022년 5월호
내일은 개발자! 코딩테스트 대비 도서전
개발자 패키지로 스펙업!
YES24 트윈링 분철 : 인서트라벨/스티커 택1 증정
5월 전사
5월 쇼핑혜택
1 2 3 4 5

품목정보

품목정보
출간일 2020년 02월 07일
쪽수, 무게, 크기 656쪽 | 188*257*35mm
ISBN13 9791163031451
ISBN10 1163031453

이 상품의 태그

책소개 책소개 보이기/감추기

상품 이미지를 확대해서 볼 수 있습니다. 원본 이미지
실리콘밸리 리액트 클래스를 그대로 담았다!
에어비앤비 프런트엔드 리드에게 배우는 리액트 프로그래밍!


전 세계의 뛰어난 개발자들이 모여 일한다는 실리콘밸리! 실리콘밸리에서도 핫한 기업인 ‘에어비앤비’에서 프런트엔드 리드로 활약하는 저자에게 리액트를 배워 보자. 『Do it! 리액트 프로그래밍 정석』은 저자가 한국 소프트웨어 기술 진흥 협회에서 진행한 리액트 오프라인 강의를 정리하고 보강하여 만든 책이다.

이 책은 리액트에 대한 전반적인 내용은 물론이고 프런트엔드 프로그래밍 기법과 클라우드 데이터베이스 적용, 서비스 배포까지 다뤄 프런트엔드 프로그래밍에 도전하려는 사람이라면 첫 번째 교과서로 삼아도 좋다. 자주 나올 만한 질문은 ‘도와줘요! 저스틴’ 코너에서 소개하고, 추상적인 내용은 그림으로 독자의 이해를 도왔다. 책의 최종 목표인 ‘가상 코인 거래소 만들기’ 프로젝트에는 리팩토링과 같은 실무 과정도 포함해 ‘진짜 에어비앤비 개발자의 실무 감각’도 익힐 수 있다.

목차 목차 보이기/감추기

첫째마당 리액트 시작하기
_01 리액트 시작하기
__01-1 리액트의 정체를 알아보자!
__01-2 리액트 개발 환경 설치하기
__01-3 리액트 앱 수정하기

_02 리액트 ES6 문법 엑기스
__02-1 템플릿 문자열
__02-2 전개 연산자
__02-3 가변 변수와 불변 변수
__02-4 클래스
__02-5 화살표 함수
__02-6 객체 확장 표현식과 구조 분해 할당
__02-7 라이브러리 의존성 관리
__02-8 배열 함수
__02-9 비동기 함수
__02-10 디바운스와 스로틀

_03 리액트 컴포넌트
__03-1 컴포넌트를 표현하는 JSX
__03-2 컴포넌트와 구성 요소
__03-3 컴포넌트에 데이터를 전달하는 프로퍼티
__03-4 컴포넌트 상태 관리하기
__03-5 컴포넌트의 생명주기
__03-6 클래스형 컴포넌트
__03-7 함수형 컴포넌트
__03-8 배열 컴포넌트
__03-9 컴포넌트에서 콜백 함수와 이벤트 처리하기
__03-10 Input 컴포넌트 만들면서 복습하기

_04 에어비앤비 디자인 시스템 따라 하기
__04-1 비주얼 테스트로 더 쉽게 개발하기
__04-2 CSS로 컴포넌트 스타일 적용하기
__04-3 스타일 컴포넌트 만들기
__04-4 테스트 위주 개발 방법 사용해 보기
__04-5 CheckBox 컴포넌트 만들면서 복습하기

둘째마당 리액트 고급 기술 따라 하기
_05 하이어오더 컴포넌트
__05-1 커링과 조합 개념 공부하기
__05-2 하이어오더 컴포넌트 기초 개념 공부하기
__05-3 하이어오더 컴포넌트 라이브러리 사용하기
__05-4 다중 하이어오더 컴포넌트 사용하기
__05-5 필수 입력 항목 표시 기능 추가하며 하이어오더 컴포넌트 복습하기

_06 컨텍스트로 데이터 관리하기
__06-1 컨텍스트의 기초 개념 알아보기
__06-2 컨텍스트 제대로 사용하기
__06-3 컨텍스트 API 활용하기
__06-4 컨텍스트로 모달 만들기
__06-5 입력 폼 만들며 컨텍스트 복습하기

_07 리덕스로 데이터 관리하기
__07-1 리덕스 기초 알아보기
__07-2 액션과 리듀서의 관계 알아보기
__07-3 그래프 데이터베이스 도입하기
__07-4 데이터를 위한 컴포넌트 알아보기
__07-5 검색 기능 만들면서 리덕스 복습하기

셋째마당 리액트 실무 개발하기
_08 가상 코인 거래소 만들기
__08-1 가상 코인 거래소 살펴보기
__08-2 가상 코인 거래소의 공용 컴포넌트 만들기
__08-3 프로젝트 구성하기

_09 원격 데이터 연결하기
__09-1 가상 데이터 서버 설정하기
__09-2 데이터 요청을 위한 axios 라이브러리 도입하기
__09-3 가상 코인 거래소에 리덕스 적용하기
__09-4 가상 코인 거래소에 검색 기능 추가하기
__09-5 가상 코인 거래 기능 추가하며 마무리하기

_10 리덕스 고급 기능 활용하기
__10-1 미들웨어 기초 알아보기
__10-2 redux-thunk와 비동기 제어
__10-3 서버 지연 처리와 오류 표시하기
__10-4 미들웨어로 알림 메시지 띄우기
__10-5 코인 거래 알림 효과 추가하며 마무리하기

_11 에어비앤비 개발 방식으로 비동기 제어하기
__11-1 redux-pack 미들웨어로 비동기 제어하기
__11-2 대용량 데이터 효율적으로 처리하기
__11-3 셀렉터로 스토어 데이터 변환하기
__11-4 axios 호출 작업 모듈화하기
__11-5 회원 가입 기능 추가하며 마무리하기

_12 리액트 라우터 적용하기
__12-1 싱글 페이지 애플리케이션
__12-2 리액트 라우터 구성하기
__12-3 주소와 리덕스 연결하기

에어비앤비 개발자의 비밀 레시피
__레시피 1 코드 스플릿팅 기법으로 bundle.js 크기 줄이기
__레시피 2 파이어베이스에 가상 코인 거래소 배포하기
__레시피 3 서버 사이드 렌더링 도입하기
__레시피 4 next.js 서버로 구동되는 서비스 배포하기
__레시피 5 파이어베이스 DB 연결하기

저자 소개 (1명)

만든이 코멘트 만든이 코멘트 보이기/감추기

안녕하세요. 이책의 편집자 입니다.
2022-01-11
안녕하세요 이 책의 담당 편집자 박현규입니다. 독자 여러분 안녕하세요! 독자 여러분이 남겨주신 불편함에 대해서 잠시 설명드리고 책의 실습을 시작할 때 어떻게 해야 하는지 해결 방법을 남겨보겠습니다. 그 전에 실습 관련 내용으로 오탈자가 많다는 지적이 있는데요. 이 내용들은 대부분 3쇄에 반영되었습니다. 도서 구매에 참고해 주시면 감사하겠습니다. 우선 이 책으로 공부를 시작하시면 초기의 환경 설정 준비가 어려워 힘드실 수 있습니다. 그도 그럴 것이 이 책의 출간까지는 약 1년이 걸렸는데요... 책이 다 완성되어 갈 즈음에 슬프게도 그 사이에 리액트 훅이 등장하는 사건이 발생했습니다. 저자 선생님과 편집자인 저는 큰 고민에 빠졌습니다. 훅을 넣기 위한 수정을 대폭하게 된다면 책을 출간할 수 없고... 그렇다고 당시에는 훅이 대세가 될 것인지 아닌지 판단하게 조금 힘들었습니다. 정확히는 훅과 기존 리액트 개발 방식이 공존할지 여부를 판단하기 어려웠는데요. 우선은 훅이 없는 리액트 개발 방식이 쭉 유지될 것이라는 판단하에 이 책 출간을 결정했습니다. 그런 비하인드 스토리가 있었고요. 아무튼! 우선 그래도 이 책을 구매하신 독자 여러분에게 최소한의 실습 시작 대응책은 마련해 드려야겠다는 생각이 들어 아래의 실습 시작을 위한 문서를 남깁니다. https://docs.google.com/document/d/17jA0t--zRa_zcoOXB7vmpJZds0O6JVwOwyhVbHP704E/edit?usp=sharing 본 도서는 리액트의 트랜디한 개발 방법은 담은 것이 아닌 두고두고 공부해 두면 도움이 될만한 내용을 담은 책입니다. 본 문서가 독자 여러분의 불편함을 좀 덜어드릴 수 있으면 좋겠습니다.

출판사 리뷰 출판사 리뷰 보이기/감추기

리액트 기초·심화 내용과 프런트엔드 프로그래밍 기법을 한번에!
변화무쌍한 프런트엔드 기술의 유행을 쫓기보다 본질에 집중하자!


프런트엔드 분야에서 새로 유행하는 기술을 금방금방 따라가는 사람들이 부럽기도 하고 신기하기도 했나요? 그들은 어떻게 빠르게 변하는 기술에 쉽게 적응할 수 있었을까요? 바로 기술의 뼈대를 잘 이해하고 있기 때문입니다. 《Do it! 리액트 프로그래밍 정석》은 리액트의 사용 방법과 함께 ‘프런트엔드 프로그래밍’을 배울 수 있는 책입니다. 리액트로 프런트엔드 프로그래밍을 어떻게 하는지 알면 리액트가 업그레이드되어도, 리액트가 아닌 다른 기술을 사용해도 자신 있게 개발할 수 있습니다.

모든 독자가 똑같은 환경에서 실습할 수 있도록 세심하게 준비했습니다!
이제 실습 환경을 준비하다가 키보드 샷건 치지 마세요!


자바스크립트 기반 라이브러리나 프레임워크 학습서를 공부할 때 버전 문제로 실습이 막혀 답답한 적이 있었나요? 책에서 안내한 대로 진행해도 ‘책을 만들 때의 버전과 실습을 진행할 때의 버전’이 달라서 헤맨 적이 있나요? 이런 문제는 초보자가 해결하기 어렵습니다. 그래서 이 책은 노드제이에스의 버전을 관리해 주는 노드 버전 매니저(NVM)와 자바스크립트 라이브러리의 버전을 관리해 주는 package.json 파일을 도입했습니다. 덕분에 실습을 진행할 때 발생할 수 있는 버전 문제를 유연하게 해결해 버전이 바뀌어도 걱정할 필요가 없습니다.

이 책은 전문가가 먼저 읽고 테스트했습니다

이 책은 여러 전문가가 미리 읽고 의견을 더해 더 알차게 완성했습니다. 따라서 독자는 내용이나 소스코드 오류 걱정 없이 공부할 수 있습니다.
성균관대학교 소프트웨어 학과 교수 박희선
카카오 프런트엔드 플랫폼 팀장 장정환
코드스쿼드 프런트엔드 마스터 윤지수
서울버스 앱 개발자 유주완
호갱노노 선임 프런트엔드 개발자 이현철
넷플릭스 선임 데이터 사이언티스트 이충구
스트림라이저 CEO 김용길

이런 사람이 읽으면 좋아요

자바스크립트 공부를 막 끝내고 프런트엔드를 공부하려는 개발자 지망생
리액트 Todolist 튜토리얼, 리액트 매뉴얼에 한계를 느낀 개발자
리액트로 진득하게 프로젝트를 진행하고 싶은 개발자
해외 프런트엔드 채용을 노리는 프런트엔드 개발자
에어비앤비에서는 프런트엔드 프로젝트를 어떻게 진행하는지 알고 싶은 개발자

- 이지스퍼블리싱 자료실 또는 저자 깃허브에서 실습 파일을 제공합니다
- 이지스퍼블리싱 자료실: https://easyspub.co.kr [자료실] (회원가입 필수)
- 저자 깃허브: https://github.com/justinpark/justin-do-it-react
- 가상 코인 거래소 미리 보기: https://justin-do-it-react.firebaseapp.com/

배우고, 나누고, 함께 성장하는 두잇 스터디룸에서 공부해 보세요

혼자 계획을 세우고 공부하다 보면 금방 지치기 마련! 나와 비슷한 고민을 하는 독자를 만나 어려운 내용을 공유해 보면 어떨까? 내가 열심히 공부한 내용으로 다른 사람을 도와준다면 더 큰 뿌듯함을 느낄 수 있을 것입니다. 또한 책을 공부하다 질문이 생기면 저자에게 질문할 수 있도록 구글폼도 제공됩니다. 혼자 끙끙 앓지 말고 친구와 함께, 저자와 함께 앞으로 나아가 보세요.
두잇 스터디룸: https://cafe.naver.com/doitstudyroom
저자 질문 구글폼: https://bit.ly/do-it-react

회원리뷰 (11건) 리뷰 총점8.5

혜택 및 유의사항?
Do it! 리액트 프로그래밍 정석 내용 평점5점   편집/디자인 평점5점 YES마니아 : 로얄 큐* | 2022.03.30 | 추천0 | 댓글0 리뷰제목
웹 퍼블리셔를 준비하면서 html css 자바스크립트 제이쿼리 그 다음은 리액트라고 생각만 하고 있었지 어려울까봐 도전하기 힘들었었는데 이번에 책을 보면서 기본적인 내용들을 습득할 수 있었어서 너무 좋았습니다! 항상 생각하지만 두잇 시리즈는 기초부터 응용까지 쉽게 알려주셔서 너무 좋아요ㅠㅠ   공부하면서 취뽀하게 되어서.. 당장은 리액트를 쓸일이 없어지는 바람;
리뷰제목

웹 퍼블리셔를 준비하면서 html css 자바스크립트 제이쿼리 그 다음은 리액트라고 생각만 하고 있었지

어려울까봐 도전하기 힘들었었는데 이번에 책을 보면서 기본적인 내용들을 습득할 수 있었어서 너무 좋았습니다!

항상 생각하지만 두잇 시리즈는 기초부터 응용까지 쉽게 알려주셔서 너무 좋아요ㅠㅠ

 

공부하면서 취뽀하게 되어서.. 당장은 리액트를 쓸일이 없어지는 바람에

홈페이지에 올라왔던 소스들 훑어보고, 책 끝까지 눈으로 쓱슥 읽어 내는 정도로 마무리 했는데도

확실히 공부하기 전 후가 다른게 느껴집니다! ㅋㅋ 일단은 기본적인 것들은 아는 정도가 되었느니

 

회사에서 리액트가 필요할때 다시 공부 시작해야겠어요!

댓글 0 이 리뷰가 도움이 되었나요? 공감 0
Do it! 리액트 프로그래밍 정석 ... 오타투성이 책.. 내용 평점1점   편집/디자인 평점1점 YES마니아 : 플래티넘 c******0 | 2021.09.19 | 추천4 | 댓글0 리뷰제목
최근 리액트를 할일이 있어 이책을 구매했습니다. Do it series를 많이 봤던터리, 가단하게 개념 잡고자.. 결과는 대 실망...  "책 오류 수정" 어마어마하다.. 도저히 책의 내용을 실행해 볼수가 없다, JS의 특성상 version업에 빨라서 그럴수 있다고 치더라도... 이책은 너무하다. 옆에 저자가 있으면 던저주고 이렇게 말하고 싶다  "이런 책을 가지고 Do it 하라고??;
리뷰제목

최근 리액트를 할일이 있어 이책을 구매했습니다.

Do it series를 많이 봤던터리, 가단하게 개념 잡고자..

결과는 대 실망... 

"책 오류 수정" 어마어마하다.. 도저히 책의 내용을 실행해 볼수가 없다, JS의 특성상 version업에 빨라서 그럴수 있다고 치더라도... 이책은 너무하다. 옆에 저자가 있으면 던저주고 이렇게 말하고 싶다  "이런 책을 가지고 Do it 하라고??" 절대 비추... Do it 도 믿을게 못되는군... 이런책을 출판해서 아직도 팔고 있다니.. 대실망.

 

====== 이하가 git hub에 저자가 올린  오탈자 ======

p.27 nvm으로 노드제이에스 설치하기
현재 현업에서 가장 많이 사용하는 노드제이에스의 버전이 8 10이기 때문입니다.

nvm install 8.10.0

nvm install 10.10.0

nvm use 8.10.0

nvm use 10.10.0
> node -v
10.10.0
p.28 1. yarn 설치하기
윈도우 사용자의 경우 공식 홈페이지 [ https://classic.yarnpkg.com/en/docs/install#windows-stable ] 에서 다운로드 받아 설치 가능합니다

p.28 2. create-react-app 설치하기 (2번 영역 전체 삭제)
yarn global add create-react-app

p.28 3. 리액트 앱 생성하기
이 책은 create-react-app 버전 2.1.7을 기준으로 작성되었습니다.

> yarn create react-app do-it-example --scripts-version 2.1.7
p.30 react-scripts 버전 수정
"react-scripts": "2.1.1"

"react-scripts": "2.1.7"

p.43 예제 코드 6번 항목
var args = Array.prototype.slice.call(this, arguments);

var args = Array.prototype.slice.call(arguments);

p.44 예제 코드 7번 항목
func(...args) { var [first, ...others] = args; }

function func(...args) { var [first, ...others] = args; }

p.70 (Promise코드와 관련하여)
(실제 Promise클래스와 약간의 차이는 있습니다.)

(개략적인 Promise코드 구조에 대해 이해를 돕고자 추가된 코드로 실제 Promise클래스와 차이가 있습니다. 아래 코드는 사용하지 말고 내장된 Promise를 사용하여 구동해주세요.)

// 아래 코드는 이해를 돕기 위한 코드입니다. 실제 코드와는 다르니 내장된 Promise를 사용해주세요.
class Promise {...}
p.92 (문장에 App.jsx파일 명명 설명 추가)
App 컴포넌트의 내용을 모두 지우고 다음을 입력해보세요. 여기서부터 App.js는 App.jsx로 변경하여 사용하겠습니다.

p.112 정답 코드
this.setState((count) => { count: count + 1; });

중괄호{} 앞뒤로 괄호()가 포함되어야 합니다. 또한 인자 count 양쪽으로 중괄호{}를 포함하여 객체 추출식으로 state값 중 count값을 추출해야합니다.
  this.setState(({ count }) => ({
    count: count + 1,
  }));
참조: https://github.com/justinpark/justin-do-it-react/blob/master/src/03/Counter.jsx#L13

p.146 예제 코드
constructor에 정의된 window.addEventListener(...) 구문을 componentDidMount 함수 안으로 옮기셔야 초기 스크롤 시 undefined 오류가 발생하지 않습니다.
  constructor(props) {
    super(props);
    this.setRef = this.setRef.bind(this);
    this.checkPosition = this.checkPosition.bind(this);
  }

  // ...

  componentDidMount() {
    window.addEventListener('scroll', this.checkPosition);
    this.checkPosition();
  }
p.154 스토리북 설치
이 책은 스토리북 버전 5.2를 기준으로 작성되었습니다.

> yarn add --dev @storybook/react@5.2.6
p.161 addon-actions 설치
> yarn add --dev @storybook/addons@5.2.6 @storybook/addon-actions@5.2.6
p.163 addon-jsx 설치
> yarn add --dev storybook-addon-jsx@7.1.13
p.200 테스트 코드 실행
./src/App.test.js 파일을 삭제한 다음 실행하세요.

(App.test.js파일을 삭제하지 말고 실행하세요.)

p.201 <Input> 테스트 코드
expect 예제 한줄 추가

    ...
    ReactDOM.unmountComponentAtNode(div);
    expect(React.isValidElement(<Input />)).toBeTruthy();
4번 항목 예제에도 추가

    ...
    ReactDOM.unmountComponentAtNode(div);
    expect(React.isValidElement(<Input name="test_name" />)).toBeTruthy();
p.203 3번 항목 테스트 코드 파일 명명 (3쇄 요청)
테스트 코드 파일의 이름은 '~_spec.jsx' '~.test.jsx'로 짓겠습니다.

참고 파일: /src/tests/04/Input_spec.jsx

참고 파일: /src/tests/04/Input.test.jsx

p.204 참조 파일 경로에 오타가 있습니다 (3쇄 요청)
참고 파일: /src/tests/04/Input_spec.jsx

참고 파일: /src/__tests__/04/Input.test.jsx

p.207 참조 파일 경로에 오타가 있습니다
참고 파일: /src/tests/04/Input_spec.jsx

참고 파일: /src/__tests__/04/Input.test.jsx

7번 항목

> yarn test ./src/tests/03/Input_spec.jsx

> yarn test ./src/__tests__/04/Input.test.jsx

p.208 참조 파일 경로에 오타가 있습니다.
참고 파일: /src/tests/04/Input_spec.jsx

참고 파일: /src/__tests__/04/Input.test.jsx

p.209 참조 파일 경로에 오타가 있습니다.
참고 파일: /src/tests/04/Input_spec.jsx

참고 파일: /src/__tests__/04/Input.test.jsx

p.210 참조 파일 경로에 오타가 있습니다.
참고 파일: /src/tests/04/Input_spec.jsx

참고 파일: /src/__tests__/04/Input.test.jsx

p.211 참조 파일 경로에 오타가 있습니다.
참고 파일: /src/tests/04/Input_spec.jsx

참고 파일: /src/__tests__/04/Input.test.jsx

p.212 참조 파일 경로에 오타가 있습니다. (3쇄 요청)
참고 파일: /src/tests/04/Text_spec.jsx

참고 파일: /src/__tests__/04/Text.test.jsx

p.214 참조 파일 경로에 오타가 있습니다.
참고 파일: /src/tests/04/Text_spec.jsx

참고 파일: /src/__tests__/04/Text.test.jsx

p.216 참조 파일 경로에 오타가 있습니다.
참고 파일: /src/tests/04/Text_spec.jsx

참고 파일: /src/__tests__/04/Text.test.jsx

p. 221 참조 파일 경로에 오타가 있습니다.
참조파일: ./src/tests/04/CheckoutBox_spec.jsx

참조파일: ./src/__tests__/04/CheckBox.test.jsx

7번 코드 오류 (required -> test_name) expect(changeStub).toHaveBeenCalledWith('required', true);

expect(changeStub).toHaveBeenCalledWith('test_name', true);

8번 코드 오류 (required -> test_name) expect(changeStub).toHaveBeenCalledWith('required', false);

expect(changeStub).toHaveBeenCalledWith('test_name', false);

p.231 05-1-compose코드에 오타가 있습니다 (3쇄 요청)
return funcArry.reduce(

return funcArr.reduce(

p. 248 아래쪽 예제코드
WrappedComponent 옆의 전개 연산자 변수가 prop이 아닌 otherProps 으로 변경해야합니다.

<WrappedComponent {...props} />

<WrappedComponent {...otherProps} />

p.261 코드 수정
function Component() {
  return null;
}

const ComponentWithX = withX(Component);
const ComponentWithXandY = withY(ComponentWithX);
const ComponentWithXandYandZ = withZ(ComponentWithXandY);

// 또는
const ComponentWithWYZ = withZ(withY(withX(Component)));
p.261 마지막 compose관련 설명 추가
05-1에서 직접 구현한 compose()함수는 사실 recompose 라이브러리에서 제공했던 것이죠. (추가 부분)

(다만 recompose의 경우 compose의 경우 적용 순서가 반대 반향인 "오른쪽에서 왼쪽 방향"으로 진행되는 차이가 있습니다. 이는 프로퍼티 전달 방향이 뒤쪽으로 진행되는 것과 관련있습니다.)

p.262 코드 예제
import compose from 'recompose/compose';
const withXYZ = compose(withZ, withY, withX);
const ComponentWithXYZ = withXYZ(Component);
// 혹은
// const compose(withZ, withY, withX)(Component);
(아래쪽 코드)

import compose from 'recompose/compose';
import withLoading from './withLoading';
import withState from' recompose/withState';
const withLoadData = withState('isLoading', 'setIsLoading', false);

function Component() {
  return '완료(컴포넌트 출력)';
}
const ComponentWithLoading = withLoading('로딩중')(Component);
const ComponentWithLoadData = withLoadData(Component);

const withLoadingAndLoadData = compose(withLoadData, withLoading('로딩중'));
// 조합이 올바르지 못한 예: compose(withLoadData, withLoading)
// 올바르지 못한 예: compose(withLoading('로딩중'), withLoadData)
export const ComponentWithBoth = withLoadingAndLoadData(Component);
// 혹은 compose(withLoadData, withLoading('로딩중'))(Component);

p. 263 (3쇄 요청)
(2) withLoadingData('로딩 중')을 먼저 조합하면 withLoadingData withLoadData의 isLoading 프로퍼티가 withLoading 하이어오더 컴포넌트에 전달되지 않으므로 주의해야 합니다.

p. 275 설명 (3쇄 요청)
주석 1번 ButtonWithContext는 지면 부족으로 코드가 누락되었습니다. 다음 참조 파일을 참조하여 추가해주세요.

참조: https://github.com/justinpark/justin-do-it-react/blob/master/src/06/ButtonWithContext.jsx

p. 279 예제코드
Button 임포트 부분 추가

import ButtonWithLoadingContext from './ButtonWithLoadingContext';
import Button from '../04/Button';
function TableComponent() 아래에 중복 선언된 TableComponent부분 삭제

const TableComponent = () =>

p.279 (3쇄 요청)
ButtonWithLoadingContext의 출력 메시지를 label 프로퍼티로 변경

버튼

<ButtonWithLoadingContext label="버튼" />
상태 변경

<ButtonWithLoadingContext label="상태 변경" />
참조: https://github.com/justinpark/justin-do-it-react/blob/master/src/06/HomePageWithProvider.jsx

p. 282 공급자 반환하는 커링 함수 만들기 설명 부분
this.state를 보면 [contextKey]라고

getChildContext()를 보면 [contextKey]라고

p. 284 예제코드
HomePageComponentWithTwoProvider 클래스 선언 앞에 export 추가

export class HomePageComponentWithTwoProvider extends PureComponent {...}

p.317 예제코드
위쪽의 두개의 중괄호}} 중 앞쪽 괄호는 일반 괄호로 변경)}해야 합니다.

  <Consumer>
    {({ openModal }) => (
      <Button onPress={openModal} />
    )}
  </Consumer>
p.343 참조 파일 경로에 오타(jsx)가 있습니다.
참조파일: ./src/07/reducers/userReducer.jsx

참조파일: ./src/07/reducers/userReducer.js

p.348 참조 파일 경로에 오타(jsx)가 있습니다.
참조파일: ./src/07/reducers/loadingReducer.jsx

참조파일: ./src/07/reducers/loadingReducer.js

p. 352 예제코드 경로
참조파일: ./src/07/collectionActions01.js

참조파일: ./src/07/actions/collectionActions01.js

p. 358 collectionReducer 예제 코드
collectionActions파일은 앞의 collectionActions01과 collectionActions02의 코드를 모두 포함한 파일입니다.

  import { SET_COLLECTION, SET_AGE } from '../actions/collectionActions';
p.431
import * as serviceWorker from './serviceWorker'; 강조 색상 삭제

p.517
TradeCoinPage.jsx 예제 코드의 handleSubmit 부분에서 createTransaction을 this.props에서 추출하는 부분이 생략되어 있습니다.

const { name, code } = this.props;

  handleSubmit(values, closeModal) {
    const { name, code, createTransaction } = this.props;
    ...
p.517 빗줄 굶은 색상으로 변경 요청 (3쇄 요청)
~~Api .post('/transactions', formValues) .then(() => closeModal());
=====================

이걸 책이라고 팔 수 있나? 

 

댓글 0 4명이 이 리뷰를 추천합니다. 공감 4
구매 초보자한테는 좀 어려운 듯 합니다.. 내용 평점3점   편집/디자인 평점3점 YES마니아 : 로얄 투*리 | 2021.04.30 | 추천0 | 댓글0 리뷰제목
리액트를 이제 배우고 있는 사람인데요...   이 책은 애증의 책이네요.. 무엇보다도 예제가 다듬어지지 않은게 아쉽습니다.. 예제가... 저자가 실제로 프로젝트에서 사용하던 것들을 가져와서 넣은 것 같은 느낌이 납니다. 그래서 export는 빼고 실행하라고 하는 것도 있고...     실제로 코딩해보면 100ms 내로 키보드드로 입력해서 엔터를 쳐야하는&n;
리뷰제목

리액트를 이제 배우고 있는 사람인데요...   이 책은 애증의 책이네요..

무엇보다도 예제가 다듬어지지 않은게 아쉽습니다..

예제가... 저자가 실제로 프로젝트에서 사용하던 것들을 가져와서 넣은 것 같은 느낌이 납니다.

그래서 export는 빼고 실행하라고 하는 것도 있고...     실제로 코딩해보면 100ms 내로 키보드드로 입력해서 엔터를 쳐야하는 것도 나옵니다...  

또한 간단한 예제인데 div에 쓸데없는 className도 있고..  

이런것들이 초보자입장에서는 무지 헷깔립니다...   이게 왜 들어갔을까.. 이게 뭐지?? 필요한 건가? 

참고파일명도 안맞는것도 있구요...  jsx파일인지... js파일인지...  헷깔립니다.

저는 더 낮은 수준의 책을 읽고 돌아와서 다시 봤습니다. (아직 다 보지 못했습니다)

실제 저자가 사용하는 실무 작업환경과 라이브러리들을 보여주고 싶은 것 같다는 느낌을 받았습니다.    

그래서 저같은 초보자들은 나아가기가 쉽지 않네요...

설명도....   음.. 그리 쉽게 설명이 되어 있지 않습니다..  제 기준엔 그러네요.

막 배우시는 분들에게는 추천드리기 어렵네요...    좀 실력이 있으신 분들이 보시면 좋을꺼 같아요...

댓글 0 이 리뷰가 도움이 되었나요? 공감 0

한줄평 (10건) 한줄평 총점 5.4

혜택 및 유의사항 ?
평점2점
오래된 책은 아닌데 클래스형 컴포넌트로 설명하고 있는게 아쉽습니다. 오류도 많고.
1명이 이 한줄평을 추천합니다. 공감 1
C*******r | 2022.04.23
평점1점
Do it 시리즈 많이 봤는데.역대 Do it중 최악. 오탈자 투성이, 이걸 책이라고??
3명이 이 한줄평을 추천합니다. 공감 3
YES마니아 : 플래티넘 c******0 | 2021.09.19
구매 평점2점
이제는 구식이 되어버린책
1명이 이 한줄평을 추천합니다. 공감 1
w*w | 2021.08.11
  •  쿠폰은 결제 시 적용해 주세요.
1   32,400
뒤로 앞으로 맨위로 aniAlarm