[노마드 코더] Class Components and State #3.0

https://nomadcoders.co /courses

1) State는 변화하는 데이터를 다루기 위한 것

(Prop은 이런 변화하는 데이터를 다루지 못 함)

state를 사용하기 위해서는 App() Function Component를 Class Component로 정의해 주어야 한다.

class App extends React.Component {}

위의 코드는 React.Component가 가지고 있는 것들을 가져와서 Class Component named App이 사용하려고 한다고 이해하면 될 것 같다.

2) Class Component App = React.Component

React.Component를 가져다 쓰는 App Class Component는 React.Component와 동일하게 render method를 가지고 있다.

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

3) Function Component와 Class Component의 차이점

Function Component는 특정 값을 반환하는 "함수"고 Class Component는 render method를 통해 "자동으로" 함수를 반환한다. "자.동.으.로".

 

여기까지는 Function Component와 특별히 다르게 동작하지 않는 Class Component.

BUT, state(state는 object이다)를 사용하려면 Class Component가 필요하다.

state에는 변화하는 데이터가 들어간다.

class App extends React.Component {
	state = {
    	count: 0
    };
    render() {
    	return <h2>The number is {this.state.count}</h2>
    }
}

 

state를 변화시키는 코드를 넣어보자

(state object의 데이터를 변화시키는 코드를 위한 준비)

class App expends React.Component {
	state = {
    	count : 0
    }
    add = () => {
    	console.log("add")
    };
    minus = () => {
    	console.log("minus");
    };
    
	render() {
    	return (
        	<div>
            	<h1>The number is {this.state.count}</h1>
                <button onClick={this.add}>Add</button>
                <button onClick={this.minus>Minus</button>
            </div>
        )
    }
}

button onClick={this.add}를 하면 onClick 이벤트가 발생했을 때, add 함수가 동작하고

button onClick={this.add()}를 하면 자동으로 add 함수가 동작한다.