[두잇!]리액트 프로그래밍 정석

여기 코드는 두잇! 리액트 프로그래밍 정석의 예제 및 연습문제 소스를 포함하고 있습니다.

작동 데모 주소

https://justin-do-it-react.firebaseapp.com/

책 오류 수정

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();