[ReactJS] ReactJS로 영화 웹 서비스 만들기 (9) - state

앞선 Food예제와 이제 작별할 시간이다. Food 예제는 state를 위해 동작하지 않기 때문이다.

 

state는 보통 우리가 동적 데이터와 함께 작업할 때 만들어 진다.

Dynamic Data (동적 데이터): 변하는 데이터, 변하지 않는 데이터, 생겨나는 데이터, 사라지는 데이터, 변경된 데이터, 하나인 데이터, 두개가 되는 데이터, 0이 되는 데이터 등등.

앞서 했던 props는 여기서 필요없다. 우리가 필요한건 이제 state다.

 

먼저 App.js를 다 지우자.

참고로 기존의 것들을 function component 라고 부른다. 앞으로 나오는것은 class component라고 한다.

React.Component

- 위의 React.Component는 뒤에 많은 것을 가지고 있다. 그 중 하나가 지금부터 이야기할 state.

- extends 를 쓰는 이유는 매번 component를 만들 때마다 모든것을 다 구현하고 싶지 않기 때문이다. 자바의 class와 비슷한거같다.

- 하지만 function component가 아니기 때문에 return이 없다. 대신 render method를 가지고 있다.

react는 자동적으로 모든 class component의 render method를 실행한다. 자동으로!!

 

여기까지보면 function component와 별 차이가 없다. 하지만 class component를 이야기하는 이유는 class component가 가진 state 때문이다.

state는 object이고 component의 data를 넣을 공간이 있고 이 데이터는 변한다.

"이 데이터는 변한다" 이게 state를 쓰는 이유이다.

바꾸고 싶은 데이터를 state에 넣는다. 예를 들어 count라는 변수를 state에 담아서 render에서 출력해보자.

이건 class 이기 때문에 {state}라고 하면 안된다. => {this.state.count}

 

다시 말하지만 state에는 바꾸고 싶은 data를 넣는것이다.

그렇다면 App.js에서 data를 어떻게 바꿀 것인가?

이건 class이고 class는 JavaScript에서 왔다. 즉, 여기서 JavaScript를 쓸 수 있다는 의미이다.

 

버튼2개를 생성하고 JavaScript함수 2개를 생성할 것이다.

plus 버튼과 minus 버튼을 누를 때마다 콘솔에 로그가 찍힌다.

 

참고로, plus와 minus를 plus(), minus()라고 쓰지 않는다.

 

 

()는 '즉시' 라는 의미이다. 우리는 클릭했을때만 function이 호출되길 원하므로 ()를 뺀다.

 

이제 감이 온다!

state는 단지 object 구나. 이걸로 함수를 맘껏 바꾸면 되는거겠지?

하지만 콘솔을 보니 Do not mutate state directly. Use setState() ~~ 라고 한다.

그렇다. state는 직접 변경하면 안된다. 직접변경할 시 react는 render function을 refresh하지 않기 때문이다.

하지만 setState를 쓰면 state를 refresh하고 render function을 호출해준다!

 

setState를 이용해 state 를 변경해 보자.

plus 버튼과 minus 버튼을 누를때마다 숫자가 변하는 것을 확인할 수 있다.

이렇게 refresh 해주면서 모든걸 다시 칠하지만 처음에 이야기했던 virtual DOM을 가지고 있기 때문에 react는 매우 빠르게 변경할 수 있다. 화면이 깜빡거리는것 조차없다.

 

정리하자면 state는 직접 고치지않고 setState로 고쳐야 한다. 

왜냐하면 새 state와 함께 render function또한 호출해야 하기 때문이다.

 

이제 완전히 고쳐보자

훌륭하다.

하지만 this.state.count를 바로 쓰는것은 좋지않은 코드이다. state에 의존하기 때문에 나중에 성능문제가 있을 수 있기 때문이다. 

 

이 방법이 state를 set할때, react에서 외부의 상태에 의존하지 않는 가장 좋은 방법이다.

 

최종 정리

setState를 호출할 때마다 react는 새로운 state와 함께 render function을 호출한다!