BEB Section 2 - React 상태 관리

 

 상태가 무엇일까?

 state 를 말하는 거겠지? 그거 말고요.

 

 상태는 변할 수 있는 데이터를 말한다. 특히 UI, 프론트엔드 개발에서는 동적으로 표현되느니 데이터를 의미한다. 그리고 여기서 사용되는 건 Side Effect이다. 함수의 입력 외 함수 결과에 따라 영향을 미치는 요인을 뜻한다. 대표적으로 네트워크 요청, API 호출이 이에 해당된다.

 

 React의 주요 개발 원칙 중 하나가 UI를 컴포넌트 단위로 본다는 것이다.

그니까.. 뭐 요런 식으로 본다는 것 같은데

 위 표처럼 입력값을 만들어 CartItem에 정보를 담아 출력하게 되면 "무언가가 들어있는 쇼핑 카트" 에 내가 담은 목록들이 이름과 가격, 배달시간과 함께 표시되어진다. 사진은 안 넣었어요, 나도 예시라는 걸 만들어야하잖아요? 

 어떤 데이터가 들어오던지 상관하지 않고, 아무리 가짜 데이터라도 컴포넌트는 위 표에서 표시한 것처럼 표현 자체에 집중하게 된다. 지금 이것 같은 경우는 fetch와 같이 API 요청이 따로 존재하지 않는다. 하지만 계속해서 심화되는 과정을 만들다보면, API 호출하는 경우도 생기기에 Side Effect의 사용도 필연적이다. 필연적인 만큼 그에 대한 상태도 고려해야하는데 총 크게 2가지로 상태를 나눠 고려한다.

 

 

로컬? 전역?

 사실 난 이게 private, global로 해서 전역변수, 지역변수로 용어와 그에 대한 사용법만 알고 있었다. 그렇게 중요하게 여겨지진 않았었는데 객체지향언어를 배우면서 이게 매우 중요한 부분이라는 것을 알았다. 컴포넌트의 상태를 나타낼 때도 로컬 상태와 전역 상태, 2가지로 나뉜다.

 로컬 상태는 특정 컴포넌트에서만 관리되는 상태이고, 전역 상태는 전체 아니면 여러 컴포넌트가 동시 관리되는 상태를 말한다. 예로 들어 카트에 담겨있는 수량이 변경되는 부분은 특정 컴포넌트에서 관리되는 부분이기 때문에 로컬 상태라고 할 수 있다. 대부분 다른 컴포넌트와 데이터를 공유하지 않으면, 그리고 HTML에서 input box, select box가 그에 해당되는 로컬 상태이다.

 전역 상태는 다른 컴포넌트와 상태를 공유하고 영향을 끼친다. 입력된 값들에 의해 출력되어 "무언가가 들어있는 쇼핑 카트" 에 보여야하기 때문에 전반적인 영향을 끼친다.

 

 사실 전역 변수의 남용은 Javascript에서 그렇게 좋지 않다. 서로 다른 컴포넌트가 사용하는 상태의 종류에 따라 다르다고 해서 전역 상태일 필요가 없고, 출처도 달라도 된다. 그렇지만 서로 다른 컴포넌트가 동일한 상태를 다루고 있는 거라면, 출처는 무조건 한 곳에서 와야한다. 사본이 있어도 동기화 하는 과정이 무조건 필요한데 동기화 과정 자체가 문제를 어렵게 만들어버린다. 그냥 한 곳에서만 상태를 저장하고 접근하는 것이 훨 수월하다. 이건 데이터 무결성을 위해 그렇다.

 

 

 동일한 데이터는 항상 같은 곳에서 데이터를 가지고 온다.

 

 

 데이터 무결성의 원칙이다. 이것은 모든 곳에서 적용되는 원칙 중 하나이다. 

 

 

Redux

 Javascript 어플리케이션에서 예측 가능한 상태 관리를 해주는 컨테이너를 의미한다. 컴포넌트 간의 정보 공유를 할 때 자식 컴포넌트가 많아진다면 상태 관리에 있어 매우 복잡해지는데, 그 복잡성을 관리해주는 것이 Redux이다. Redux에는 3가지 원칙이 존재한다.

• Single source of truth
  • 동일한 데이터는 항상 같은 곳에서 데이터를 가지고 온다.
• State is READ-ONLY
  • React에서도 state를 변경하기 위해 setState를 사용해야만 변경이 가능했는데, Redux에서는 Action 객체를 통해 state 변경이 가능하다.
• Changes are made with pure functions

 

 

Redux의 기본 개념을 알아보고자 한다.

• Store : 상태가 관리되는 오직 하나의 공간
  • 어플리케이션에서 필요한 state를 두고 컴포넌트끼리 store에 접근해 state의 정보를 가져올 수 있다.
• Action : Javascript의 객체

{
  type: "ORDER",
  drink: {
    menu: "Americano",
    size: "Tall",
    iced: true
  }
}

 이런 식으로 형태를 지정해줘야하고, 해당되는 정보를 객체에 저장해줘야한다.

 

• Reducer 

그니까 얘가.. 그니까요 출처 : 코드스테이츠

 Action을 통해 Store로 갈 때, Reducer를 거쳐서 가야한다. 지금 보이는 그림과 같이, Action 객체는 Dispatch 라는 새로운 메서드에 전달하고, 이제 이것을 Reducer를 이용해 Dispatch로 호출해 새로운 state 를 발생시킨다. 이 공식을 따르는 이유는 데이터 단방향성 때문이다.

 

 

Redux의 장점은 총 이러하다.

• 상태 예측 가능
• 유지 보수 용이
• 디버깅 유리(Action 객체에 state log 기록한 경우)
• 테스트에 붙이기 쉽다.

 

 Redux에 대한 더 상세한 내용은 아래의 링크에 있다. 저도 공부 중이랍니다.

 

https://www.robinwieruch.de/react-redux-tutorial/