[State]상태관리

State?

- 화면에서의 현재 데이터들의 저장된것을 조작하기 위한 것이라 생각하면 된다.

- 예시로 객체간의 메세지 상호작용을 통해 프로그램을 구현할 때 객체가 가지고 있는 데이터들을 상태라고 할 수 있다.

Class Message{
	data: string;
    type: MessageType;
    constructor(data: string, type: MessageType) {
    	this.data = data;
        this.type = type
    } 
}

위의 코드에서의 data와 type이 상태이다.

 

- 또다른 예시로 CheckBox에서 데이터를 저장할때 on과 off가 있는 있는 경우로 들 수 있다.

 

프론트엔드의 상태관리란?

- 데이터에 맞춰서 적절하게 UX와 UI를 설계하고 구현하는 것

 

Example)

• 어느 숫자의 표기가 너무 많아질때 화면에 보여지는 부분의 크기가 더 커지면 UI가 이상해지니 이 부분을 요약해서 보여주는 형식으로 짧고 읽기 쉽게 바꿔주는 동적으로 변하게 하는것을 상태관리라고 할 수 있다.
• 어떠한 에러를 화면에 보여주는것도 여러가지 예외처리가 존재하는데 이러한 에러들을 보여주는 부분도 상태관리라고 할 수 있다.

상태종류

-Global State : 모든 요소, 컴포넌트의 앱에 접근가능한 state

 

import React from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { inc } from './actions'

export const Counter = () => {
  const dispatch = useDispatch()
  const count = useSelector(store => store.counter.count)

  return (
    <>
      <h1>The count is: {count}</h1>
      <button onClick={() => dispatch(inc())}>Increment</button>
    </>
  )
}

<>
  <Counter />
  <Counter />
</>

위의 코드에서 count를 공유하게 된다.

 

-Local State : Global State와의 반대 개념

 

const Counter = () => {
  const [count, setCount] = useState(0)
  const incrememt = () => setCount(count => count + 1)

  return (
    <>
      <h1>The count is: {count}</h1>
      <button onClick={increment}>increment</button>
    </>
  )
}

<>
  <Counter />
  <Counter />
</>

위의 코드에서 count는 개별적으로 작동한다.