프로 리액트 2일차

속성은 컴포넌트의 구성정보에 해당한다. 속성은 상위 컴포넌트로부터 받으며, 이를 받은 컴포넌트 내에서는 변경할수 없다.

상태는 컴포넌트의 생성자에 정의된 기본값에서 시작해(일반적으로 사용자 이벤트에 의해) 여러차례 변경될 수 있다. 컴포넌트는 자신의 상태를 내부적으로 관리한다. 또한 상태가 변경될 때마다 컴포넌트가 다시 렌더링 된다.

오늘은 3장 부터 5장까지 읽어볼 예정이다.

페이지 94

let originalTicket={ company: 'Dalta', flightNo: '0990', departure: { airport: 'LAS', time: '2016-08-21T10:00:00.000Z'}, arrival:{ airport: 'MIA', time: '2016-08-21T14:41:10.000Z'}, codeshare: [ {company:'GL', flightNo:'9840'}, {company:'TM',flightNo:'5010'} ] }

let new Ticket = Object.assign({}, originalTicket, {flightNo: '5690'})

2객체를 만들었다.

그리고

2번째 객체의

newTicket.arrival.airport="MCO"

arrival의 객체 내부값을 변경했더니

1번째, 2번째 객체의 내용이 변경되어버렸다. 이것은 자바스크립트의 기본동작의 문제이므로
리액트의 불변성도우미를 사용하면 해결할수 있다.


110페이지 부근

소스코드를 전부따라서 입력했는데

bundle.js:22060 Uncaught TypeError: Cannot read property 'bind' of undefined

정의되지않은  속성(바인드)을 읽을수 없다.


해결 )

  checkInpuKeyPress(evt){
    if(evt.key === 'Enter'){
      this.props.taskCallbacks.add(this.props.cardId, evt.target.value);
      evt.target.value='';
    }
  }
checkList.js 의 엔터키 체크하는 부분에 오타가 있었다.


bundle.js 에러난 부분을 유심히 살펴보면 디버깅 시간을 줄일수 있다.