React : state를 통해 동적인 데이터를 다뤄보자!!

우선 Counter 컴포넌트를 하나 만들어보자!

Counter.js

위에서부터 아래로 살펴보자!

 

우선, 컴포넌트의 state를 정의할 때에는 class fields 문법을 사용해서 정의해!

만약 class fields 문법을 사용하지 않는다면 이렇게 돼!

확실히 class fields를 사용하는게 편해보이지?

 

맞아! 편의성 때문에 class fields를 사용하는거야!

 

constructor에서 super(props)를 호출한 이유는

우리가 컴포넌트를 만들게 되면서 컴포넌트를 상속하게 되고

constructor를 사용하면 기존의 클래스 생성자를 덮어쓰게 돼!

 

그래서 리액트 컴포넌트가 갖고 있던 생성자를 super를 통해서 미리 실행하고

그 다음에 우리가 할 작업(state 설정)을 해주는거야!

 

만약 class fields도 사용하고 constructor도 사용하게 된다면 어떤 부분이 더 늦을까?

class fields가 먼저 실행되고 constructor가 설정되네!!

 

 

참고: velopert.com/3629