[리액트] 클래스형, 함수형 컴포넌트에서 state 값 관리하기 (state 설정과 업데이트)

state란 컴포넌트 내부에서 설정하고 바꿀 수 있는 데이터를 의미한다. 클래스형 컴포넌트와 함수형 컴포넌트가 state를 설정하고 업데이트하는 방법에는 차이가 있다.

 

클래스형 컴포넌트

import React from 'react';

class StateClass extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'maple',
    };
  }

  onClick = () => {
    this.setState({
      name: 'lavender',
    });
  };

  render() {
    return (
      <>
        <p>안녕하세요 저는 {this.state.name}입니다</p>
        <button onClick={this.onClick}>이름을 라벤더로 바꾸기</button>
      </>
    );
  }
}

export default StateClass;

state 설정

class 안에 있는 초기 생성자 함수 constructor 안에 this.state로 state값 설정

constructor(props) {
  super(props);
  this.state = {
    name: 'maple',
  };
}

state 업데이트

setState() 함수로 state값 업데이트

this.setState({
  name: 'lavender',
});

 

함수형 컴포넌트

import React, { useState } from 'react';

const StateFunc = () => {
  const [name, setName] = useState('maple');

  const onClick = () => {
    setName('lavender');
  };

  return (
    <>
      <p>안녕하세요 제 이름은 {name}입니다</p>
      <button onClick={onClick}>이름을 라벤더로 바꿔주기</button>
    </>
  );
};

export default StateFunc;

state 설정

useState라는 hook을 사용해서 state를 설정한다. name이라는 state의 초깃값은 'maple'이다

const [name, setName] = useState('maple');

state 업데이트

name의 state를 업데이트해주는 함수 setName()안에 업데이트 해줄 state를 넣어준다.

const onClick = () => {
  setName('lavender');
};

 

useState란?

• 상태를 관리할 때 사용하는 Hook
• 하나의 useState 함수는 하나의 상태값만 관리 할 수 있다
• 컴포넌트에서 관리해야 할 상태가 여러개라면 useState를 여러번 사용한다

useState 문법

const [value, setValue] = useState(initial value)

• value: 상태값
• setValue: value의 상태를 업데이트하는 함수
• useState(initial value): 함수 안에는 value 초기값이 들어간다