ReactJS Basic - 4

@노마드코더
🐱깃허브 : ReacJS로_영화 웹 서비스 만들기

state{}와 setState()

값의 변화를 적용시키려 할때

어떤 액션으로 인하여 값의 변화가 일어날때, 그것을 화면으로 적용시키기 위해선 render function 이 다시 호출되어야 한다.


때문에 아래와 같이 값을 변화시키려 할땐 에러가난다

state = {
		count: 0
	}
	// javascript code
	add = () => {
		this.state.count = 1;
	};

에러 메시지

Line 18:3: Do not mutate state directly. Use setState() react/no-direct-mutation-state

⇒ "직접 값을 바꾸지말고 setState()를 사용하거라"

setState

setState() ⇒ 값의 변경 + render에 function을 새로고침

• setState()로 값을 변경할 경우, 변경된 부분만 새로고침되어 적용된다.

import React from "react";

// '리액트 클래스 컴포넌트'클래스를 App이라는 객체로 가져온다
class App extends React.Component{
	// state는 오브젝트이다.
	// 변수를 state안에 넣는다.
	state = {
		count: 0
	}
	// javascript code
	add = () => {
		// this.state.count = 1;
		this.setState({count: 1});
	};
	minus = () => {
		this.setState({count: -1});
	};
	render(){
		// stat는 객체이기 때문에 'this'를 써줘야만 한다.
		return <div>
			<h1>The numver is: {this.state.count}</h1>
			<button onClick={this.add}>Add</button>
			<button  onClick={this.minus}> Minus</button>

		</div>
		}
}

export default App;

setState 사용방법 - 1

this.setState({count: this.state.count + 1});

setState 사용방법 - 2

this.setState(current => ({count: current.count + 1}));

• 현재 state에 있는 값을 가져오는 것으로, 이게 더 나은 방법이라고 함