[React.js] 리액트의 기본 useState란?

 

 

리액트를 공부해보니 useState가 가장 흔하게 사용되고 

중요한 내용으로 생각이 들었다.

아직 지식이 얕기때문에 추후에 생각이 바뀔지도 모르지만 우선은 내생각이니..!

useState에 대해 정리해보자!

---

useState란 무엇인가?

useState는 함수형 또는 클래스형 컴포넌트의 상태를 관리하고,  변경할 수 있도록 도와주는 하나의 React Hook 이다.

(컴포넌트와 Hook에 대해서도 정리해야겠다)

 

 

한마디로 로컬의 데이터 상태를 관리할 수 있게 해주는 기능!

 

하나의 useState 함수는 하나의 상태 값만 관리할 수 있기 때문에 

컴포넌트에서 관리해야 할 상태가 여러 개라면 useState를 여러번 사용해야 함!!

 

state란 무엇일까?
state만 제대로 이해하고 사용 할 수있으면 react의 절반은 이해했다고 할 수 있으 정도라고한다.
간단히 생각하면 state는 변수이다.
javascript 의 기본적인 변수들(const,let,var)이 있는데 state를 사용하는 이유는? 또 차이점은?
state변수는 다른 변수와 다르게 값이 변하면 렌더링이 일어난다.
즉, 값이 변하면 state와 연관있는 컴포넌트들이 다시 렌더링되어 화면이 바뀌게 된다!

state와 함께 사용되는 함수는 setState인데 state의 값을 변경시켜주는 함수이다.

 

선언 방법

const [state, setState] = useState(초기값);

- state : 변수 
- setState : 변경키셔주는 함수

- useState : state,setState를 return 하면서 초기값을 설정해주는 hook 

 

 

 

useState는 주로

- 동적 데이터를 다룸

- 컴포넌트별 고유한 상태 값

- 변경 가능성(실시간 or 주기적 렌더링이 필요한 UI)

과 같은 상태관리를 통한 컴포넌트 내부에 캡슐화를 활용하여 UI 업데이트 등에 사용된다.

 

 

 

---

컴포넌트별 상태관리 방법

- 클래스 컴포넌트 : 생성자 "this.변수"사용하여 관리
- 함수형 컴포넌트 : useState를 활용하여 관리

 

1. 클래스형 상태관리 코드

import React, { useState } from 'react';

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

  const incrementCounter = () => {
    setCount(count + 1);
  };
...
  return (
    <div>
    ...
    </div>
  );
};

 

 

2. 함수형 상태관리 코드

import React, { Component } from 'react';

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

  incrementCounter = () => {
    this.setState({ count: this.state.count + 1 });
  }
	...
    
  render() {
    return (
      <div>
        ...
      </div>
    );
  }
}

export default Counter;

 

 

⭐ 참고

https://codiving.kr/21

https://okeybox.tistory.com/421