[React] 상태관리 - 1

2023-06-21(수)

 

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

 

상태란 무엇일까요?

-> 상태는 변하는 데이터입니다. 특별히 UI, 프론트엔드 개발에서는 "동적으로 표현되는 데이터" 입니다.

 

 

위의 쇼핑몰 홈페이지에서 상태는 어떤것들이 있을까요?

 

장바구니 담기 , 금액 , 선택한 수량 , 선택 여부, 현재 선택한 탭 등이 있을 수 있죠

여기서 사용자의 선택에 따라 상태가 변경되는 곳과, 변경의 영향을 받는 곳 2가지로 나누어 볼 수 있습니다.

 

변경되는 곳은 어디일까요?

-> 선택 여부, 수량등이 있습니다.

영향을 받는 곳은 어디일까요?

-> 금액, 개수 등이 있을겁니다.

 

전에 학습했던 Side Effect를 다시 알아봅시다. 상태를 다룰 때에 Side Effect는 주요 고려 대상입니다.

 

먼저 Side Effect의 정의는 무엇일까요?

-> "함수의 입력 외에도 함수의 결과에 영향을 미치는 요인" 입니다. 

대표적으로 네트워크 요청, API 호출이 Side Effect입니다.

 

React의 주요 개발 원칙중 하나는 UI를 페이지 단위가 아닌 컴포넌트 단위로 보는 것입니다.

 

만일 위의 그림과 같이 <CartItem> 이라는 컴포넌트를 만든다면, fetch와 같은 API 요청이 없어도

이 컴포넌트는 작동되어야 합니다. 어떤 데이터가 들어오는지 상관하지 않고, 가짜데이터라 할지라도 컴포넌트는

표현 그 자체에 집중하는 것이죠.

---

*presentation  컴포넌트란?

=> 우리가 리액트 개발에 있어 컴포넌트를 2가지 형식으로 나누어 바라볼 수 있습니다.

프레젠테이션 컴포넌트 / 컨테이너 컴포넌트

 

프레젠테이션 컴포넌트는 

1. 직접적으로 보여지는 부분에 대해 담당한다.

2. Store에 의존적이지 않다.

3. props를 통해 데이터와 callback을 전달 받는다.

4. 마크업과 스타일을 가진다.

5. 데이터를 직접적으로 변경하지 않는다.

6. UI 상태값 이외에 대체로 다른 상태값을 가지고 있지 않는다.

 

컨테이너 컴포넌트는

1. 데이터 핸들링에 대한 위주로 개발한다.

2. 마크업이나 스타일을 가지지 않는다.

3. 리덕스의 액션이나 상태 변경에 대한 로직을 담고 있고, 프레젠테이셔널 컴포넌트에 해당 상태를 전달하거나 함수를 제공한다.

4. 다른 프레젠테이셔널 컴포넌트나 컨테이너 컴포넌트를 관리한다.

---

하지만, 앱을 만들다 보면 분명 API 호출도 해야 하고, Side Effect는 불가피하게 생기기 마련입니다.

이러한 Side Effect에 의존적인 상태도 있을 수 있죠

 

ex) 장바구니 데이터가 서버에 있다면, 네트워크요청(fetch) 때문에 오래 걸릴 수도 있습니다.

이러한 상태에서 " 로딩 중 " 을 나타낼 것인지 아닌지는 데이터 전송 여부에 따라 달려있습니다.

 

상태를 구분하는데에는 규칙이나 법이 있는 것은 아니지만 로컬,전역에 나누어서 생각해 보자

로컬은 특정 컴포넌트 안에서만 사용되는 상태이며 전역은 컴포넌트 전체 혹은

여러가지 컴포넌트에서 사용되는 것을 말한다.

• 이 두개를 구분 하는 것은 쉽다.

로컬은 말 그대로 한 컴포넌트 내에서만 다루어 지기 떄문에 다른 컴포넌트에 영향을 주지 않지만

전역은 다른 컴포넌트 내에서도 사용되고 영향을 받아 값이 변할수 있다는 것을 알아두자

 

보통 전역은 사용하는 것이 좋지는 않지만 반드시 사용해야할 필요가 있다.

• 서로 다른 컴포넌트가 동일한 상태를 다룰떄에이런 경우에서는 출처는 오직 한 곳이어야 하며 이것을 데이터의 무결성 이라고 한다.

좀더 쉽게 말하면 여러곳에서 데이터를 받아서 두 컴포넌트가 같은 상태를 다루는 것이 아니라 단 하나의 데이터를 사용해서 두 컴포넌트가 다루어야 한다는 말이다.

 

전역으로 관리되는 데이터들

• 네이버의 다크모드
• 특정 사이트, 웹의 언어 선택

이러한 상태 관리를 도와주는 여러가지 툴이 있으며 우리는 Redux에 대해서 배워 볼 것이다.

1. 전역 상태를 보관할 저장소를 제공한다.
2. props drilling 문제를 해결한다

상태 관리 툴은 없어도 충분히 대규모작업을 할수 있지만 익혀두면 유용하게 사용할수 있기 떄문에 배우는 것이다.

props drilling : 최상위 컴포넌트에서 최하위 컴포넌트에 상태를 보낼떄에 중간에 있는 컴포넌트들을 들러서 보내야 하는데 이를 말하는 용어이다