Class Components and State

react의 Components에는 function conmponent와 class component가 있다.

 

앞서 포스팅한 내용은 function component들이고

이제 movie app을 만들 텐데 지금부터는 class component를 사용하겠다.

class를 이용해 react class component(react에 이미 내장되어 있는 class component)로 부터 App class component에 extends했다.

현재는 App은 react.Component와 같은 역할을 한다.

기본적으로 Class react component는 return을 가지고 있지 않다.

무슨 말일까. 클레스 리액트 컴포넌트는 function이 아니기 때문에 return이 없다.

대신 render method를 가지고 있다.

react는 자동적으로 모든 class compnent의 render method를 실행 하고자 한다.

h1태그에 텍스트를 넣고 한번 실행해보자.

위 예 처럼 함수형과 다른점은 render()메소드 안에서 원하는 결과물을 실행해줘야 한다. 이렇게 작성하면

제대로 실행이 된다.

다시 기억하자 react는 automatically 로 class component의 render method를 실행한다! 자동으로!

자 그럼 function component도 있는데 왜 굳이 class component를 가져와서 써야할까...

(그런데~ 검색중 알아보니 요즘 추세는 class보다 function component를 쓰는 추세라고 한다 Hooks가 추가되어서라나 

아무튼 뭔가 class의 단점도 있는 것인듯)

바로 class component가 가진 state때문이다.

 

state는 object이다. component의 data를 넣을 공간이 있고 이 데이터는 수시로 변하는 값을 갖는다.

자 그럼 state를 왜 사용해야 하나.. 코딩을 진행해보며 알아보자.

state 오브젝트 안에 변하는 값을 가진 count 라는 프로퍼티를 하나 넣어 주었다.

이 count를 활용 하려면 class이기 때문에 this를 활용해야 한다.

 

자 이렇게 html에 들어갔다. 이제 이 숫자의 값을 변경 시켜보자. 앞서 말했듯 state에는 바꿀수 있는 data인 count를 넣어주었다.

이제 class 포스팅에서 했던것 처럼  + , - 버튼 두개를 만들어서 1씩 증감을 시켜주자.

 

먼저 state오브젝트에 count는 default value를 0으로 주고

 

render method에 숫자값을 this.state.count로 주고 각 버튼에 onclick 이벤트를 준다.

주의할 점은 react는 이벤트를 줄때 camel-case를 써서 onClick이렇게 써줘야 한다.

(이벤트가 아닌 동적스타일을 적용할 때도 fontSize 이런식으로 사용한다)

 

그리고 각각 add와 minus함수를 만들어서 expression적용을 위해 { } 중괄호 안에 this.add, this.minus로 핸들러를 지정해준다.

이렇게 하고 브라우저 콘솔창을 보면

직접 state를 mutate하지 말고 setState()를 사용하라고 나온다.

이유는 직접 state를 변경하면 reacts는 render function을 refresh하지 않기 때문이다.

다시 말하면 state상태를 변경할때 마다 매번 react가 render function을 호출해서 바꿔줘야 한다는 말이다.

워닝에 뜬데로 setState()함수를 호출하면 react는 언제 개발자가 setState를 호출 할지를 알고 또한 view를 refresh하길

원하는 것을 알고 render function을 refresh하길 원하는것을 안다.

react 공식 문서를 보면 

https://ko.reactjs.org/docs/faq-state.html

setState()는 컴포넌트의 state객체에 대한 업데이트를 실행한다.

state가 변경되면, 컴포넌트는 리랜더링 된다고 한다.

 

자 공식 문서를 본김에 좀더 살펴보자. 

state와 props의 차이점은 무엇인가.

props와 state는 일반 javascript객체이다. 두 객체 모두 랜더링 결과물에 영향을 주는 정보를 갖고 있는데,

한가지 중요한 방식에서 차이가 있다.

props는 함수 매개변수처럼 컴포넌트에 전달되는 반면 state는 함수 내에 선언된 변수처럼 컴포넌트 안에서 관리 된다.

 

다시 코드로 돌아와 setState를 사용해주자

변경이 되었다~ 주의할 점은 state는 objecd이기에 setState에 새로운 state를 줄때 object의 형태로 줘야한다.

react는 setState를 호출하면 state와 render function을 refresh해준다.

이제 증감을 나타내주기 위해 this.state.count에 각각  +1과 -1을 해주면 view에서 이벤트 발생시 증감이 이루어진다.

 

참고로 이코드는 좋은 코드는 아니라고 한다. 차후 몇 가지 성능 문제로 state에 의존하면 안되는 문제가 발생한다고 한다.

function의 방식으로 다시 작성해보면

 

이렇게 작성이 가능하고 역시 제대로 작동을 한다. setState를 할때 react에서 외부의 상태에 의존하지 않는 가장 좋은 방법이다.

 

자 니코가 강조한다! 기억하자

매순간 setState를 호출할 때마다 react는 새로운 state와 함께 render function을 호출해준다.