컴포넌트 내부에서 선언한 State를 어떻게 변경하는지 알아봅시다.

이제 새 프로젝트를 하나 만들어봅시다. Counter를 만들어 State를 통해 데이터를 정의해보고 이를 조작하는 방법을 배워보겠습니다. 시작하기에 앞서 필요 없는 파일은 모두 지우겠습니다. App.test.js, index.css, logo.svg, App.css 파일 모두 지워주세요. 그리고 index.js 파일에서 index.css를 import한 구문, App.js 파일에 있는 모든 내용을 지워주세요. create-react-app 업데이트 이후로 App 컴포넌트도 함수형 컴포넌트로 생성되기 때문에 State 선언이 불가능합니다. 따라서 저희는 클래스 컴포넌트로 App 컴포넌트를 재작성할 것입니다. 이제 App.js에서 Counter를 구현해보겠습니다. 먼저 state를 선언해줍시다.

• src/App.js

import React, { Component } from 'react';

class App extends Component {
	state = { number: 0 }

	render() {
		return (
			<div></div>
		)
	}
}

export default App;

다음으로는 컴포넌트 내부에서 생성한 state를 화면에 출력해주고, 이를 제어하기 위한 버튼을 만들겠습니다. 아래와 같이 따라 작성해보세요.

• src/App.js

import React, { Component } from 'react';

class App extends Component {
	state = { number: 0 }

	render() {
		return (
			<div>
				<div>
          <button>+</button>
          <button>-</button>
        </div>
        {this.state.number}
			</div>
		)
	}
}

export default App;

우선 return 구문 안에서 변수를 사용하기 위해서 중괄호로 둘러싸야 합니다. 이것은 나중에 프로젝트를 진행하면서 익혀나가 봅시다. 그리고 number를 출력하는 데에 this.state.number라고 적어줬습니다. 우선 state는 클래스 내부에 선언된 인스턴스 변수입니다. 이에 접근하기 위해서 맨 앞에 this 키워드를 적어줘야 합니다. 그리고 state는 json 형식의 객체입니다. 객체 내부의 number에 접근하기 위해서는 [변수명].number와 같은 형식으로 받아와야 하므로 저렇게 적은 것이죠. 그럼 state를 출력하는 방법을 배웠으니 이를 어떻게 조작하는지 알아봅시다. 아래와 같이 작성해주세요.

• src/App.js

import React, { Component } from 'react';

class App extends Component {
	state = { number: 0 }

	countUp = () => {
		this.setState({ number: this.state.number + 1 });
	}

	countDown = () => {
		this.setState({ number: this.state.number - 1 });
	}

	render() {
		return (
			<div>
				<div>
          <button>+</button>
          <button>-</button>
        </div>
        {this.state.number}
			</div>
		)
	}
}

export default App;

위의 코드를 보면 두 개의 함수가 추가된 것을 알 수 있습니다. countUp 함수와 countDown 함수인데요, 이 함수에서 사용되는 setState 함수에 대해 알아봅시다. 먼저 setState 함수는 전달되는 값만 업데이트해줍니다. 만약 state에 number와 name 값이 있는데 변경된 number 값만 setState 함수에 들어왔으면 state에서는 number 값만 업데이트되는 것이죠. 그런데 유의할 점이 한 가지 있습니다. 바로 setState 함수는 객체를 깊게 확인하지 못한다는 점입니다. 아래 예시를 보시죠.