Class Components 와 State

State는 class Component 에서만 쓰일 수 있다.

---

Class Component

🔼이렇게 생긴걸 function Component 라고 부르는데

🔼 이렇게 생긴건 class Component 라고 부른다. react Component로 부터 확장된 Component이고

function이 아니기 때문에 return을 쓸 수 없다. 대신 render를 쓴다.

그리고 그 안에 return을 쓸 수 있다. react는 자동적으로 render() method를 실행시킨다.

---

State(object)

-Component의 데이터를 넣을 공간이 있고 이 데이터는 변한다.

-Dynamic Data와 함께 쓰임

결과

위 코드는 state의 default가 0으로 설정되어있고 그 수는 변할  수 있다.

아래처럼 Html을 작성하고 JS Code를 작성한다.

그리고 button마다 onClick을 적어주는데, 본래 JS에서는 따로 onclick을 만들어주거나 addEventListener 을 사용해야 하지만

react에서는 그럴 필요없이 바로 사용하면 된다. onClick prop가 자동으로 등록되어 있기 때문

this.plus() 처럼 괄호를 적어주면 바로 실행이 되어 버린다. 클릭했을 때만 실행되게 하려면 괄호없이 적는다.

버튼을 누르면 콘솔창에 minus 혹은 plus가 뜬다.

만약에 plus 버튼을 누르면 0에서 1이 되게 하기 위해 아래와 같이 코딩하여 직접 이 state 숫자를 변경하려고 하면

위와 같이 밑줄이 그어지면서 에러가 생긴다.

state를 변경하고 싶다면 setState를 사용해야한다.

그러면 plus 버튼을 눌렀을 때 0이었던 state가 1이 된다.

버튼을 누를 때마다 숫자를 변하게 하고 싶다면 위의 코드처럼 적는다.

minus 버튼을 누르면 하나 작아지고

plus 버튼을 누르면 하나 커진다.

state에 의존하는 것은 몇 가지 문제를 불러일으킬 수 있어서

이렇게 적는 것이 더 낫다. 최근의 값을 불러와서 사용하는 것.

setState를 할 때마다 react가 자동으로 render function을 호출해준다.(rerender)