React - State 개념과 useState Hook

State 개념

  리액트에서 State는 Component의 데이터 상태를 말한다. 

한마디로 State란 개발자가 정의한 변경 가능한 데이터를 말하며 이는 자바스크립트 객체로서 존재한다.

 

KeyPoint는 렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야 한다는 점이다.

왜냐하면 State가 변경될 경우 Component가 다시 렌더링 되기 때문에 그 외의 데이터가 State로 작성되면

불필요하게 다시 렌더링되어 성능저하를 초래하기 때문이다.

 

따라서 렌더링이나 데이터 흐름에 사용되지 않는 값들은 Component안에 instance field로 정의해서 사용한다.

 

useState

useState는 React의 내장 Hook 중 하나로, 함수형 컴포넌트에서 상태를 관리할 수 있게 해준다.

이는 클래스형 컴포넌트에서 this.setState를 사용하는 것과 비슷한 역할을 하며 기본적인 사용방법은 다음과 같다.

 

const [state, setState] = useState(initialState);

 - useSate함수는 파라미터값으로 초기 상태 값을받고, 배열을 반환한다.

 -  배열의 첫 번째 요소는 state로 현재 상태 값이다.

 -  배열의 두 번째 요소는 setState로 상태를 업데이트 해주는 함수이다.

 

 

다음은 버튼을 클릭하면 숫자가 올라가는 간단한 코드를 통해 확인해보도록 한다.

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default Counter;

 

 

클래스형 컴포넌트에서의 state

아래는 클래스형 컴포넌트에서 this.state와 this.setState를 사용한 방법이다.

import React from 'react';

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

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

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={this.incrementCount}>
          Click me
        </button>
      </div>
    );
  }
}

export default Counter;