SEB[React : 상태관리]

Jogi's 코딩 일기장·2021년 8월 13일
0
post-thumbnail

Spring 유닛을 배우고 나서 다시 React로 돌아와 상태관리에 대한 학습을 진행했다. 상태관리에서도 Redux에 대한 학습도 진행했으며, 학습했던 개념들을 정리해보겠다.

상태관리

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

  • 상태는 UI에 동적으로 표현될 데이터이다.

  • 프론트 개발에서의 Side Effect

    • 상태를 다룰 때 Side Effect는 주요 고려 대상이다.
    • Side Effect는 함수(또는 컴포넌트)의 입력 외에도 함수의 결과에 영향을 미치는 요인이다. 예를 들면 네트워크 요청(백엔드 API 요청)을 들 수 있겠다.
  • React의 주요 개발 원칙 중 하나는 UI를 페이지 단위가 아닌 컴포넌트 단위로 보는 것이다.

  • 상태의 2가지 구분

    • 로컬 상태 : 특정 컴포넌트 안에서만 관리되는 상태

      • 대부분의 경우 다른 컴포넌트와 데이터를 공유하지 않는 Form(input box, select box, radio button 등)을 이용한 상태는 로컬 상태이다.
    • 전역 상태 : 프로덕트 전체 혹은 여러 컴포넌트에서 관리되는 상태

      • 다른 컴포넌트와 상태를 공유하고, 영향을 끼치는 상태이다.
      • 서로 다른 컴포넌트가 사용하는 상태의 종류가 다르면, 전역 상태일 필요는 없다. 출처(Source)가 달라도 된다.
      • 하지만, 서로 다른 컴포넌트가 동일한 상태를 다룬다면, 이 출처는 오직 한 곳이어야 한다. -> 여기서 하나의 공간이 전역 공간이라 볼 수 있다.
  • 전역 상태에서의 데이터 무결성

    • 데이터 무결성

      • 데이터의 무결성을 보장하기 위해 데이터의 변경이나 수정 시 제한을 두어 안정성을 저해하는 요소를 막고 데이터 상태들을 항상 옳게 유지하는 것
    • 무결성을 위한 방법론 : Single Source of truth - 신뢰할 수 있는 단일 출처

      • 동일한 데이터는 항상 같은 곳에서 데이터를 가지고 온다.
  • 상태 관리를 위한 각종 툴 : React Context, Redux, MobX

    • 전역 상태 저장소를 제공한다.
    • Props drilling 이슈를 해결한다.
  • 상태가 어디에 위치해야 하는지 아는 것이 제일 중요하다.

Redux

  • React 없이 사용할 수 있는 상태 관련 라이브러리

  • Java Application 내에서 예측 가능한 상태 컨테이너이다.

  • 컴포넌트 간의 정보 공유

    • 형제 컴포넌트들 간에 데이터를 주고 받을 때, 부모 컴포넌트를 통해서 주고 받는다. 하지만 자식 컴포넌트가 많아진다면 상태관리가 매우 복잡해진다. 이 복잡성을 줄이기 위해 Redux를 활용한다.
  • Redux의 세 가지 원칙

    1. Single Source of truth => Store라는 상태 저장 공간이 있다.
      • 상태가 관리되는 오직 하나의 공간
    2. State is read-only => Action이라는 객체로 State를 변경 가능하다.
      • 단순한 자바 객체이다. 그 객체 안에 type은 필수며, 다양한 정보들이 담긴다. Store에게 Application data를 운반해주는 역할
    3. Changes are made with pure Functions => Reducer
      • 현재 상태와 Action을 이용해 다음 상태를 만들어 낸다.
        (Action, Dispatch) => (Reducer) => Store(new State)
      • Action 객체는 Dispatch에게 전달되고, Dispatch는 Reducer를 호출해서 새로운 state를 생성한다.
  • Redux의 장점

    • 상태를 예측가능하게 만들어 준다. => Reducer가 순수함수이기 때문이다.

    • 유지보수

    • 디버깅에 유리하다. (action과 state log 기록 시)

    • 테스트를 붙이기 쉽다. => 순수함수를 사용하기 때문이다.

Reference

  • 코드 스테이츠 강의 자료
profile
프로그래머로서의 한걸음

0개의 댓글