React의 4가지 개념(4) - state

React Component에서 데이터를 관리하는 수단, state에 대해 알아봅시다.

state

지난 시간, 우리는 부모 Component에서 데이터를 전달받는 props에 대해 알아보았습니다. 이번 시간에는 Component 안에서 변하는 데이터를 저장하는 state에 대해 알아보겠습니다.

우선 우리가 state를 이용하여 만들 것은 계수기입니다. Plus 버튼을 누를 때 우리가 가지고 있는 값이 1 증가하게 만드는 것을 함께 해보고, Minus 버튼은 여러분들의 상상력을 활용하여 한번 해보시기 바랍니다.

이번 강의에서 주의해야 할 점은, state는 props에 비해 Class Component와 Function Component의 사용 방법이 많이 다릅니다. 헷갈리지 마시고 잘 공부하시기 바랍니다.

import React, { Component, useState } from "react";

(...)
function FCHello({ name }) {
  const [number, setNumber] = useState(0);

  return (
    <>
      <h1>Hello {name}!</h1>
      <h2>{number}</h2>
      <button
        onClick={() => {
          setNumber(number + 1);
        }}
      >
        Plus
      </button>
    </>
  );
}


class CCHello extends Component {
  state = {
    number: 0,
  };

  render() {
    const { name } = this.props;
    return (
      <>
        <h1>Hello {name}!</h1>
        <h2>{this.state.number}</h2>
        <button
          onClick={() => {
            this.setState({ number: this.state.number + 1 });
          }}
        >
          Plus
        </button>
      </>
    );
  }
}
(...)

onClick Event Handler

state를 보기에 앞서, 이번 강의에서 사용할 onClick이라는 props부터 살펴봅시다. onClick은 우리가 HTML에서 사용했던 onclick 속성과 비슷한 역할을 하는 React의 Event Handler입니다. 해당 Component가 클릭될 때 실행될 함수의 이름 혹은 그 함수의 선언부를 값으로 받고, Component가 클릭될 때 그 함수를 실행시킵니다. 주의할 것은 함수의 호출이 아닌 선언 혹은 이름이라는 것입니다. 아래 예시를 보시면 이해가 가실 겁니다.

// Do
<button onClick={handleClick}>Text</button>
<button onClick={() => {
  // Something
}>
  Text
</button>

// Don't
<button onClick={handleClick()}>Text</button>
<button onClick={
  // Something
}>
  Text
</button>

state in Function Component

Function Component부터 살펴봅시다. Function Component에서 state를 사용하기 위해서는 우선 react 라이브러리에서 useState를 import해야 합니다. 이런 식으로 use로 시작하는 함수들을 Hooks라고 합니다. Hooks에는 useState말고도 다양한 것들이 있는데, 이것들에 대해서는 여기를 참고해보시기 바랍니다.

Function Component에서 useState를 사용하면 useState는 초기값을 parameter로 받고, 배열 하나를 반환합니다. 배열의 첫 번째 인자는 우리가 넣어 둔 값을, 두 번째 인자는 그 값을 세팅할 수 있는 함수를 반환합니다. 두 개를 반환하는 이유는, 우리가 state의 값을 직접 변경하면 안 되기 때문입니다.

우리가 지금 작성한 코드를 예시로 보면, 초기값은 0으로 주었고 그 결과를 number와 setNumber로 받았습니다. 이 코드는 지난 시간에 배운 destructuring의 배열 버전인데, 아래 코드와 같은 뜻입니다.

const result = useState(0);
const number = result[0];
const setNumber = result[1];

이렇게 되면 number에는 초기값인 0이 들어가고, setNumber는 number의 값을 변경할 수 있는 함수가 오게 됩니다.

이제 그 값을 화면에 띄워봅시다. 밑에 보면 우리가 원래 작성해 둔 <h1> Component 밑에 <h2> Component로 number의 값을 출력했고, 그 밑에 Plus라는 <button> Component를 만들었습니다. 그리고 <button> Component의 props로 onClick을 주었고, 버튼이 클릭될 때마다 setNumber를 호출해서 원래 있던 number의 값에 +1하여 다시 number로 저장하라고 알려주었습니다.

위처럼 만들고 나면, 브라우저에 Plus 버튼을 누를 때마다 올라가는 숫자가 하나 표시될 것입니다.

(위 사진은 Plus버튼을 5번 누른 후의 상태입니다.)

state in Class Component

이제 Class Component에서의 state 설정도 한번 봅시다. Class Component에서는 state의 초기값을 선언하는 것으로 사용할 준비가 끝납니다. 다만, 반드시 사용 전에 초기값을 선언해주셔야 합니다.

Class Component에서는 this.state.키로 해당 값에 접근하고, this.setState({ 키: 값 })으로 해당 값을 업데이트합니다. 따라서 <h2> Component의 children으로 this.state.number를 주었고, <button> Component의 onClick props에는 this.setState({ number: this.state.number + 1 })를 주었습니다.

위처럼 만들고 나면, Function Component와 동일하게 Plus 버튼에 따라 값이 바뀌는 숫자가 표시될 것입니다.

(위 사진은 Plus 버튼을 3번 누른 후의 상태입니다.)

여기까지 해서 state를 활용해 Component 안에서 데이터를 저장하고 수정하는 방법에 대해 알아보았습니다. 수업은 여기까지이지만, 여러분은 직접 Minus 버튼도 한 번 만들어보시는 것을 추천드립니다.