상태란?

객체지향 프로그래밍(OOP)에서 객체(Object)가 변수로 자신의 상태(state)를 가짐.

프론트엔드에선 동적으로 표현할 수 있는 데이터

상태관리란?

목표한 UI/UX를 구현하기 위해 적절히 상태(데이터)와 그 구조를 정의, 설계하고 상태를 잘 추적하는 일.

좋은 상태관리란?

가장 좋은 상태 관리는 관리할 상태가 없는 것

‘상태’는 잠재적인 사이드 이펙트(Side-Effect)이다.

• 순수 함수
  • 출력값에 영향을 주는 변수가 오직 입력 값인 함수
  • 순수함수는 예측 가능하고, 신뢰할 수 있고, 테스트하기 쉽다.
    • 입력 값 외의 다른 변수들에 영향을 받지 않기 때문
• 사이드 이펙트란?
  • 함수(또는 컴포넌트)의 입력 외에도 함수의 결과에 영향을 미치는 요인
• 일반적인 사이드 이펙트
  • 서버에 API로 데이터 요청
  • 브라우저 API와 상호 작용
  • setTimeout, setInterval 등 예측할 수 없는 타이밍 함수 사용
• state가 side effect를 발생시키는 경우
  • setState 함수 : UI 렌더링이 트리거 되어, useState 훅 또는 componentDidUpdate 메서드 사용해 DOM 조작, API 호출 등의 side effect 발생 가능
  • 조건부 렌더링(Conditional Rendering) : State 값에 따라 컴포넌트의 UI가 달라지도록 구현 시 State 값 변화에 따라 Side Effect 발생 가능
  • Refs : state 값 사용해 ref 객체 생성 시 state 값 변화에 따른 side effect 발생 가능

사이드 이펙트의 증가는 곧 개발의 복잡도로 이어지며, 이를 최소화하는 것이 좋다.

따라서 무작정 상태를 선언하고 관리하며 전역 변수 라이브러리를 남용하는 것이 아닌,

• 작은 컴포넌트에서 단발적이고 휘발적인 상태 혹은 데이터를 다룬다 - useState
• 업데이트할 상태가 많아진다 - useReducer

useReducer – React

import { useReducer } from 'react';

function reducer(state, action) {
  if (action.type === 'incremented_age') {
    return {
      age: state.age + 1
    };
  }
  throw Error('Unknown action.');
}

export default function Counter() {
  const [state, dispatch] = useReducer(reducer, { age: 42 });

  return (
    <>
      <button onClick={() => {
        dispatch({ type: 'incremented_age' })
      }}>
        Increment age
      </button>
      <p>Hello! You are {state.age}.</p>
    </>
  );
}

• 여러 곳에서 상태를 쓰게된다 - useContext

import { createContext, useContext } from 'react';

const ThemeContext = createContext(null);

export default function MyApp() {
  return (
    <ThemeContext.Provider value="dark">
      <Form />
    </ThemeContext.Provider>
  )
}

function Form() {
  return (
    <Panel title="Welcome">
      <Button>Sign up</Button>
      <Button>Log in</Button>
    </Panel>
  );
}

function Panel({ title, children }) {
  const theme = useContext(ThemeContext);
  const className = 'panel-' + theme;
  return (
    <section className={className}>
      <h1>{title}</h1>
      {children}
    </section>
  )
}

function Button({ children }) {
  const theme = useContext(ThemeContext);
  const className = 'button-' + theme;
  return (
    <button className={className}>
      {children}
    </button>
  );
}