프론트엔드 개발에서의 상태 관리

• 상태란?
  "UI에 동적으로 표현될 데이터"

• Side Effect
  "함수(또는 컴포넌트)의 입력 외에 함수의 결과에 영향을 미치는 요인"

  • 대표적인 예: 네트워크 요청 (백엔드 API 요청)
  • 컴포넌트는 입력이 fake 데이터라도 표현할 수 있어야 한다. (presentation 컴포넌트)

• 상태의 적절한 위치는? [React로 사고하기]

• 상태의 두 가지 구분

  • 로컬 상태: 특정 컴포넌트 안에서만 관리되는 상태
    다른 컴포넌트와 데이터를 공유하지 않는 폼(form) 데이터는 대부분 로컬 상태 (input box, select box 등과 같이 입력값을 받는 경우)

  • 전역 상태: 프로덕트 전체 혹은 여러 컴포넌트에서 동시에 관리되는 상태

    • 서로 다른 컴포넌트가 사용하는 상태의 종류가 다르면, 서로 다른 출처(source)가 있어도 상관없다.
    • 하지만 서로 다른 컴포넌트가 동일한 상태를 다룰 때에는, 서로 다른 출처로부터 가져오는 것은 피해야 한다.

• 전역 상태에서의 데이터 무결성
  데이터 무결성이란?
  ➡️ 데이터의 정확성을 보장하기 위해 데이터의 변경이나 수정 시 제한을 두어 안정성을 저해하는 요소를 막고 데이터 상태들을 항상 옳게 유지하는 것.

  • 무결성을 위한 방법론 "Single source of truth"
    ➡️ 동일한 데이터는 항상 같은 곳에서 데이터를 가지고 온다.

• 상태 관리를 위한 툴들 ➡️ React Context, Redux, Mobx 등

  상태 관리 툴들은 어떤 문제를 해결해주나요?

  • 전역 상태 저장소 제공
  • props drilling 이슈 해결