프론트엔드 상태관리

Purple·2021년 11월 1일
0

TIL

목록 보기
44/73

프론트엔드 개발에서 상태란,

  • 프론트엔드 개발에서 상태란, UI에 동적으로 표현될 데이터이다.
  • 프론트엔드 개발에서 Side Effect란, 함수(또는 컴포넌트)의 입력 외에도 함수의 결과에 영향을 미치는 요인이다. 예를 들면, 네트워크 요청 (백엔드 API요청)이 있다.

두가지 상태: 로컬 & 전역

  • 로컬: 특정 컴포넌트 안에서만 관리되는 상태이다.
    로컬 상태를 구분하기 위해서는 컴포넌트 내에서만 영향을 끼치는 상태인지 확인하는 것이다. 다른 컴포넌트와 데이터를 공유하지 않는 폼 데이터는 대부분 로컬 상태이다. input box, select,box 등과 같이 입력값을 받는 경우가 이에 해당한다.
  • 전역: 프로덕트 전체 혹은 여러 컴포넌트에서 관리되는 상태이다.
    전역상태를 구분하기 위해서는 다른 컴포넌트와 상태를 공유하고 영향을 끼치는지 확인하는 것이다.

JavaScript에서 전역변수를 남용하는 것은 일반적으로 좋지 않다. 하지만 경우에 따라서 전역 상태가 필요하다. 서로 다른 컴포넌트가 사용하는 상태의 종류가 다르면, 꼭 전역 상태일 필요는 없다. 출처가 달라도 된다.

그러나, 서로 다른 컴포넌트가 동일한 상태를 다룬다면, 이 출처는 오직 한 곳이어야한다. 만일 사본이 있을 경우, 두 데이터는 서로 동기화하는 과정이 필요한데, 같은 데이터임에도 불구하고 여러곳에서 데이터를 불러와 동기화를 해야하므로 문제를 어렵게 만든다. 그래서 한곳에서만 상태를 저장하고 접근하도록 해야한다. 여기서 ‘하나의 출처’는 다른말로 이야기하면 ‘전역 공간’이라고 볼 수 있다.

전역 상태에서의 데이터 무결성

데이터 무결성이란?

  • 데이터의 정확성을 보장하기 위해 데이터의 변경이나 수정 시 제한을 두어, 안정성을 저해하는 요소를 막고 데이터 상태들을 항상 옳게 유지하는 것이다.

무결성을 위한 방법론

  • single source of truth(신뢰할 수 있는 단일 출처)를 원칙으로 지킨다. 즉, 동일한 데이터는 항상 같은 곳에서 데이터를 가지고 온다.

상태 관리를 위한 유명한 각종 툴..

  • React Context, Redux, MobX 등등
  • 상태관리 툴이 반드시 필요한 것은 아니다. 그러나 상태 관리 라이브러리가 해결해 주는 문제들이 있다.
    • 전역 상태를 위한 저장소를 제공한다.
    • props drilling 문제를 해결한다.
profile
다시 보면, 더 많은 것들이 보인다.

0개의 댓글