3. React State

안녕하세요! 효그니에요! 와! 리액트! 엄청 빨리 다시돌아왔다!

이번 글에서 설명할 것은 React Component의 state입니다.

State란?

Component가 갖는 유동적인 데이터를 의미합니다.

Class Component

카운터를 하나 만들어보겠습니다!

class Counter extends React.Component {
	constructor(props) {
		super(props); // React.Component의 생성자 메소드입니다.
		this.state = { // this.state로 state를 설정합니다.
			number: 0, // number 초기 값 설정
		};

		this.handleCounter = this.handleCounter.bind(this); // 함수 바인딩
	}

	handleCounter(e) { // 카운터 동작 함수를 구현합니다.
		this.setState({ number: this.state.number + 1 }); // this.state로 state를 변경합니다.
	}

	render() {
		return (
			<div>
				<h2>{this.state.number}</h2> {/* {변수} 를 통해 값을 표현할 수 있습니다. */}
				<button onClick={this.handleCounter}>카운트</button>
				{/* onClick 메소드를 사용하여, 버튼의 동작을 설정할 수 있습니다. */}
			</div>
		);
	}
}

 

동작의 순서를 표현하면,

버튼 누르기 → onClick 메소드 실행 → onClick 메소드 내의 handleCounter 실행 → handleCounter 의 this.setState 실행 → state 변경 → reRender ( 숫자 바뀌는 것 )

이 되겠네요.

Functional Component

hooks Api 의 useState를 사용합니다.

import React, { useState } from 'react';

const Counter = () => {
	const [number, setNumber] = useState(0); // useState로 state & state를 변경하는 함수 선언
	return (
		<div>
			<h2>{number}</h2> {/* 카운트 나타내기 */}
			<button onClick={() => setNumber((number) => number + 1)}>카운트</button>
			{/* 선언했던 setNumber를 사용하여 값 증가 */}
		</div>
	);
};

onClick 메소드에는 동작할 함수가 들어갑니다. 야! 온클릭! 넣을게~!

const Counter = () => {
	const [number, setNumber] = useState(0); // useState로 state & state를 변경하는 함수 선언

	function handleCounter(e) {
		setNumber((number) => number + 1);
	}

	return (
		<div>
			<h2>{number}</h2> {/* 카운트 나타내기 */}
			<button onClick={handleCounter}>카운트</button>
			{/* 선언했던 setNumber를 사용하여 값 증가 */}
		</div>
	);
};

간단하게 풀어쓰면 이렇게 되겠네요.

클래스형 컴포넌트의 state와 다른 점이라면, useState를 사용하여 state를 this.state처럼 묶지 않고 개별적으로 갖고 있을 수 있다는 점이겠군요.

이상으로 state에 대한 글을 마치겠습니다!

추운 날씨 조심들 하시고! 따닷하게 다니세요!