컴포넌트를 만드는 옛날 문법.
지금은 컴포넌트를 function으로 만들지만
예전에는 class로 만들어줬다고한다.
이렇게 부모 컴포넌트에서 써주면 return문 안의 JSX 내용이 남는다.
컴포넌트 클래스 안의 내용은 html을 return하는 render함수가 있다는것 외에,
React.Component라는 클래스를 extends 하며
생성자인 constructor()가있고
그 안에 부모 클래스인 React.Component의 constructor()를 호출하는 super()를 가지고 있다.
일반 클래스와 크게 다르지않다.
그러면 이 옛날 방식 컴포넌트 안에서 state 변수는 어떻게 선언할까.
이렇게 해준다.
생성자 안에 this.state를 선언하고 그 안에 객체 형식으로 state 변수를 만들어준다.
그 다음 state 변수들의 변경을 한다면?
this.setState라는 함수를 사용한다.
버튼을 클릭하면 실행하는 함수에 this.setState 함수를 호출하고 인자로 바꿀 state의 이름(key값)과 바꿀 값 (value)를 객체 형식으로 넣어준다.
중요한점은 state 객체에서 바꿀 프로퍼티만 인자로 넣어주면된다.
그럼 바꾸고자하는 state만 변화시킬 수 있다.
onClick 안의 로직을 함수로 묶어서 사용하고 싶을때는어떨까.
이렇게 changeState라는 함수로 class 내에서 선언을 해주고 onClick에는 this.함수명으로 호출할 수 있다.
그러나 문제가 생긴다.
changeState라는 함수는 지금 함수 선언의 일반적인 형태로 선언되었다.
공부했다시피
function 함수명() { }; 이렇게 함수를 선언하면 해당 함수 내의 this값이 변화한다.
그래서 this.setState의 this는 OldCompStyle이라는 class를 가르키지않는다.
따라서 해당 오류를 수정하기 위해서는
1) 메소드의 선언을 changeState = () => { } 이렇게 바꿔주거나,
2) render 메소드에서 changeState 호출 시 this.changeState.bind(this);
이런 this의 값을 유지시켜주는 작업을 해줘야한다.
하지만 위의 문제점들은 function 으로 컴포넌트를 만들게되면서 사라진 문제점들이다.
그렇다고한다.