Class Components and State

리액트 컴포넌트에서 다루는 데이터는 두개로 나뉜다. 바로 props 와 state 인데, 미리 요약하여 설명하면 props 는 부모 컴포넌트가 자식 컴포넌트에게 주는 값이다. 자식 컴포넌트에서는 props 를 받아오기만하고, 받아온 props 를 직접 수정 할 수 는 없다.

반면에 state 는 컴포넌트 내부에서 선언하며 내부에서 값을 변경 할 수 있다. 저번 포스트까지 props에 대해서 다뤄봤으니 이번 포스팅은 state에 대해서 다뤄보자.

 

자, 동적인 데이터를 다룰 땐 어떻게 할까? 바로 state 를 사용한다. state는 보통 우리가 동적 데이터와 함께 작업할 때 만들어진다. 변하는 데이터, 존재하지 않는 데이터 그리고 생겨나고 그러고선 사라지고 또는 변경된 데이터, 하나인 데이터 그리고 두개가 되고 또는 0이 되는 그런 종류의 것들, 이게 dynamic data다. 그리고 이러한 data를 다루기 위해선 props는 우리를 도울 수 없고, 우리가 필요한 건 state다. 따라서 이전의 작성했던 코드들은 모두 삭제하고, 또한 우리는 function component를 class component로 변경해줄것이다.

 

우선 이렇게 작성을 해보자.

import React from 'react';
import PropTypes from 'prop-types';

class App extends React.Component {}   
// 클래스는 리액트에서 제공하는 컴포넌트라는 클래스를 extends, 상속해서 만든다. 

export default App;

 

좋다. 이제 App, class App은 react component이다. react component는 뒤에 많은 것을 가지고 있다. 그 중 하나가 우리가 이야기 할 state이기도 하다. 그리고 매번 우리가 component를 만들 때마다 모든 것을 다 구현하고 싶지 않기 때문에, 우리는 extends from을 한다. 좋다, 예를 들어보자. 애기는 사람에서 확장(extends)되고, 사람으로부터 모든 특징을 가져올 수 있다. class에 대한 좀 더 자세한 설명은 이 블로그의 React 카테고리의 첫 포스트에 나와있다. 혹은 Java 카테고리의 JAVA 객체 지향 프로그래밍_1 을 참고하면 좋을 것이다.  

 

여기서 우리가 하는 일은 매우 쉬운 일이다. 기본적으로 react class component에서 가져오고 있다. 그리고 우리는 거기서 확장(extend)되고 있다. 그리고 이제 우리의 App component는 react component인 것이다. 매우 간단하다. 하지만 react component는 어떻게 동작할까? class react component는 return을 가지고 있는 것이 아니다. 왜냐하면 function이 아니기 때문이다. 그 대신에 render method를 가지고 있다. 이는 왜냐하면 App component는 react component에서 확장했기 때문인데, react component는 render method를 가지고 있고, 이를 App이 extend from을 했기 때문에 App도 render method를 사용할 수 있는 것이다. 

 

class component와 function component는 차이가 존재한다.  앞서 배웠던 function component는 function이고 뭔가를 return한다. 그리고 screen에 표시된다. class component는 class인데, react component로 부터 확장되고 screen에 표시된다. 그리고 그 screen에 표시되는 것 우린 render method 안에 넣어야만 한다. react는 자동적으로 모든 class component의 render method를 실행하고자 한다. 자 다시 반복해 보자, react는 자동적으로 당신의 class component의 render method를 자동으로 실행한다! 그렇다면 왜 우린 class component를 사용하려고 가져오는 것인가? function component는 쉬웠는데, 왜 class component에 대해 이야기 해야 하는 걸까? 

 

우리가 class component를 이야기 하는 이유는 class component가 가진 우리가 원하는 state라고 불리는 녀석 때문이다. 

 

state는 object다. 매우 간단하다. state는 object이고 이 object안에는 component의 data를 넣을 공간이 있고, 이 data는 변화무쌍하다. 알겠어? 이 data는 변해. 이게 우리가 왜 state를 사용해야하는지에 대한 이유다. 

 

자 우리도 state를 만들어보자. 우리의 경우에는 counter를 만들것인데, 이를 위해서 state 안에 count: 0 을 설정하자.

우리는 state안에 count: 0 을 설정했고, 따라서 count는 기본적으로 0이 될것이다. 아까 말했다시피, 우리가 바꿀 데이터를 state안에 넣는 것이다. 그리고 state를 render에 넣고 싶으면 이렇게 하면 된다. 

 

좋다, 자 이제 보다시피, 

Im a Class 0이 출력이 되었다. 여기서 Im a Class 대신 The number is: 으로 바꾸는 것이 screen에 표시되는 문맥상 더 맞을 듯 하니, 그렇게 바꾸자.

 

바꾸었는가?

아름답다. 하지만, state에는 바꾸고 싶은 data를 넣는 것이다. 여기서 문제는 App에서 data를 어떻게 바꿀 것인가이다.

우선 코드를 다음과 같이 좀 수정해주자.

 

이에 따라 screen에는 다음과 같이 표시될 것이다.

좋다. 잘 표시되었다. 보다시피, JSX는 변경되지 않았고 HTML도 정상이다. 차이점은 state가 class component에 있다는 점이다. 따라서 우리는 this.state를 할 필요가 있다. 우리는 component의 data를 바꾸기를 원해서 이 작업을 하고 있음을 기억해야한다. 다시, react.js는 Javascript이다, 우리는 Javascript를 쓸 수 있다. 그리고 class는 Javascript에서 왔다. 

우선 내가 할 일은 두 개의 function을 작성하는 것이다. 

class 내부에 add function과 minus function을 작성해주자. 이 두 function은 react의 기법이 아니라 javascript 그 자체 이다. 이 두 function의 코드블럭에 기능을 구현하는 내용은 다음 포스트에서 다루기로 하고 우선 add function에는 console.log("Add") 그리고 minus function에는 console.log("minus")를 넣어주자, 그리고 이를 우리는 어떻게 쉽게 호출할 수 잇을까 ? <button>으로 가자, button에는 onClick이라는 prop이 기본적으로 있다. 이건 react magic이긴 함. javascript에서는 다른 onClick이나 eventListner를 등록해야하는데, 여기 react에서는 자동적으로 주어진 onClick을 가지고 있다.  이제 누군가가 button을 클릭할 때, 우리는 thit.add 또는 this.minus를 실행할 것이다. 코드를 봐보자.

   이제 동작을 시켜보자, 페이지에 가서 콘솔창을 열어보자, add 버튼 혹은 minus 버튼을 클릭할 때마다 콘솔창에 잘 표시가 된다. 잘 동작을 하는 군, 좋다. 다음번엔 function 내부를 작성하며, 이제 어떻게 state를 업데이트 할 수 있을지에 관하여 알아보자.