[React] class를 이용한 옛날 옛적 React 문법

class ~ extends ~

class Profile extends React.Component {
~
}

=> React.Component에서 뽑아서 Profile이라는 클래스를 만들겠다.

constructor

state는 constructor에

super() 하나 해주고

그 밑에 변수값들을 넣어준다

constructor는 class의 변수/초기값 저장할 때 쓴다.

this.setState

class로 만들면 복잡하고 어렵다

class 형식에서 state를 변경하려면

이전 문법은 this.setState라는 방식을 이용해야한다.

지금 함수는 기존 변수인 state를 완벽하게 대체하는 형식으로 데이터가 바뀌는데 여기는 일부를 변경해준다.

constructor와 return 사이에 함수 정의

함수를 만들어놓을 수도 있다.

예를들어, onClink안에 함수를 넣을 때 활용할 수 있다.

대신 잊지말고 꼭 this를 써줘야한다. 안그러면 에러 뜸

react는 this가 문제를 많이 일으킨다.

그리고 this.setState에 이어서 bind라는 코드를 써서 인자들을 넣을 수 있다.

이게 귀찮으면 에로우 함수를 만들면 bind 안써도 됨

결론

class는 훨씬 더 복잡하다

신문법을 활용하고

옛날 코드들을 이해할 때 참고하도록

옛날 코드 예시는 지금 프로젝트에 활용하고 있는 slick이라는 carozoul 라이브러리처럼 ... ㅋ

https://react-slick.neostack.com/