[React.js] Class component

React.js 기본 프로젝트를 생성하면 기본적으로 App function component가 생성된다. class component와 function component의 차이점을 알아봤다.

Function Component

이름 그대로 function이다. 따라서 무언가를 return하여 screen에 표시된다.

Class Component

class이기 때문에 function component처럼 return 하지는 않는다. 하지만 react component로 부터 확장된 형태로, render를 사용해 screen에 표시된다.

class App extends React.Component {   render() {     return <h1>I am a class component</h1>;   } } Colored by Color Scripter

cs

class component를 사용하면 React는 render 메서드를 호출한다. 따라서 꼭! 오버라이딩 해야 한다.

class component를 사용하는 이유

class component는 state 객체를 가지고 있다. state는 동적인 데이터를 다루기 위해 필요하다. 

State 객체

동적인 데이터를 사용할 때 써야하는 객체. 즉 데이터가 바뀔때마다 스크린을 다시한번 rendering하는 작업이 필요하다는 것. 

이 때 state 객체에 직접 접근하여 값의 변경을 주려고 하면 안된다. state의 setState() 메서드를 호출해야 React가 페이지를 refresh 해주기 때문이다. 이 메서드를 사용하지 않으면 state에 변화를 줘도 이전의 렌더링 값이 출력되고 변화는 눈에 보이지 않을 것이다.

class App extends React.Component {   state = {     count: 0,   };   add = () => {     this.setState((current) => ({ count: current.count + 1 }));   };   minus = () => {     this.setState((current) => ({ count: current.count - 1 }));   };   render() {     return (       <div>         <h1> The number is : {this.state.count}</h1>         <button onClick={this.add}>Add</button>         <button onClick={this.minus}>Minus</button>       </div>     );   } } Colored by Color Scripter

cs

간단하게 state객체를 사용해 볼 수 있는 코드이다.