1장.

• 왜 내 프로젝트에서 React를 사용하는걸까?
• virtual DOM이란 무엇이고 왜 사용되고 있는 걸까?

2장.

3장.

• jsx에서는 IIFE 문법을 사용해야 한다. 바로 실행을 해줘야하고 if문은 사용할 수 없다.

• 비지니스 로직 같은 경우는 jsx 내부가 아닌 밖에서 작성하는게 좋다.

(() => {
  if (value === 1) return (<div>하나</div>);
  if (value === 2) return (<div>둘</div>);
  if (value === 3) return (<div>셋</div>);
})()

if문을 사용하고 싶으면 위에 코드처럼 IIFE 형식으로 작성해줘야 한다.

• jsx에선 class와 style을 적용하는 문법이 조금 다르다.
  class대신 className을 사용하고 내부에 style을 줄때는 style="" 형식이 아닌 style={}으로 작성해줘야 한다.

4. props와 state

• React에서 다루는 데이터는 두가지가 있는데 state와 props이다. 이 때
  props는 부모에서 받아오는 값이고 이 값은 직접 수정하지 못한다.
  그리고 state는 내부에서 값을 정의하고 수정할 수 있다.

• defaultProps 문법

static defaultProps = {
    name: "기본이름"
  }

• 함수 컴포넌트로 작성하면 초기 마운트가 아주 미세하게 빠르고 메모리 자원도 덜 사용한다.
  하지만 미세한 차이이다.
  => 이유가 뭘까? 함수 컴포넌트에는 render 함수가 없기 때문이다.

• class field가 어떤거지?

const person = {
  name: "민혁"
  age: 25
}

이런식으로 객체를 만드는걸 class field라고 한다.

• 왜 this가 undefined 되는걸까?

import React, { Component } from 'react';

class Counter extends Component {
  state = {
    number: 0
  }

  handleIncrease = () => {
    this.setState({
      number: this.state.number + 1
    });
  }

  handleDecrease = () => {
    this.setState({
      number: this.state.number - 1
    });
  }

  render() {
    return (
      <div>
        <h1>카운터</h1>
        <div>값: {this.state.number}</div>
        <button onClick={this.handleIncrease}>+</button>
        <button onClick={this.handleDecrease}>-</button>
      </div>
    );
  }
}

export default Counter;

위 경우에는 이벤트가 정상적으로 동작한다. 하지만

import React, { Component } from 'react';

class Counter extends Component {
  state = {
    number: 0
  }

  handleIncrease: function () {
    this.setState({
      number: this.state.number + 1
    });
  }

  handleDecrease: function (){
    this.setState({
      number: this.state.number - 1
    });
  }

  render() {
    return (
      <div>
        <h1>카운터</h1>
        <div>값: {this.state.number}</div>
        <button onClick={this.handleIncrease}>+</button>
        <button onClick={this.handleDecrease}>-</button>
      </div>
    );
  }
}

위와 같이 내부 메서드에 화살표함수가 아닌 그냥 함수로 표현하면 this는 window를 가리키고 있기 때문에 undefinde가 출력된다.

• setState는 객체의 깊숙한 곳까지는 확인하지 못한다.

 state = {
    number: 0,
    foo: 'bar'
  }

this.setState({number: 1});

state = {
    number: 1,
    foo: 'bar'
  }

위와 같은 경우는 가능하지만

state = {
    number: 0,
    foo: {
      bar: 0,
      foobar: 1
    }
  }


this.setState({
  foo: {
    foobar: 2
  }
})

{
  number: 0,
  foo: {
    foobar: 2
  }
}

하나만 더 깊어져도 bar은 가져오지 못한다.

이유는 뭘까?

this.setState({
  number: 0,
  foo: {
    ...this.state.foo,
    foobar: 2
  }
});

그래서 이렇게 작성해줘야한다.

• React에서 이벤트 처리

render() {
    return (
      <div>
        <h1>카운터</h1>
        <div>값: {this.state.number}</div>
        <button onClick={this.handleIncrease}>+</button>
        <button onClick={this.handleDecrease}>-</button>
      </div>
    );
  }

이런식으로 해준다.

화살표 함수의 this binding

화살표함수는 앞에서 배운 this binding처럼 호출되는 방식에 따라서 결정 되지 않는다.

반대로 렉시컬 바인딩이 된다. 즉 화살표 함수를 정의한 위치에서의 상위 환경과 동일한 this를 가리킨다.

function foo() {
    setTimeout(() => {
        // this는 foo() 함수로부터 lexical 바인딩된다.
        console.log(this.name);
    }, 1000);
}

const bar = {
    name: '철수'
};

foo.call(bar); // 철수

위 코드를 보면 foo 함수의 this는 bar 객체로 binding이 되고 이 때 setTimeout의 콜백 함수가 화살표 함수이니 이 내부에서 사용되는 this는 bar 객체로 binding이 되는걸 확인할 수 있다.

// Bad
const foo = {
    name: '철수',
    bar: () => console.log(this.name)
};

foo.bar(); // undefined

그래서 위와 같이 화살표 함수를 잘못 사용하는건 주의할 필요가 있다.
위에 같은 경우는 화살표 함수가 아니라면 정상적으로 철수를 불러온다.