함수형 컴포넌트(functional Component)가 나온 이유는?

클래스형 컴포넌트의 치명적인 단점

• this문제
• 클래스형 컴포넌트에서는 this.props this.state를 사용해 접근을 한다.
• 그런데 이런 this binding 을 조심해서 다루어야한다.

1. this 를 잃어버리는 경우

class App {

constructor(state) {
this.state = state;
}

showState() {
console.log(this.state);
}
}

const app = new App('num');

app.showState(); // num

const showState = app.showState;
showState(); // 에러

• 인스턴스에 .을 붙여 클래스 메서드를 호출하면, this 정상적으로 클래스에 바인딩 된다.
• 하지만 다른 변수에 메서드를 할당해 호출하면 this 는 원래 바인딩 되어있던 클래스를 잃어버리고, 전역 객체인 window 에 바인딩 된다.

2. this 가 가리키는 대상이 바뀌는 경우

• 즉 this.props가 바뀌게 되어 값이 바뀌는 경우도 있다. 따라서 잘못된 값을 보여줄 수 있다.