[React] 상태관리 라이브러리란?

1. 리액트의 작동원리

Context 와 여타 전역상태관리등 React 를 조금 더 자세히 다루고자 한다면 낯선 단어들을 보게 될 것이다.

Context 관리와 다른 상태관리를 왜 하는지는 리액트의 작동원리와 함께 생각해보면 필요성을 느끼게 될 수 있다. 

 

1. 컴포넌트 기반 구조
   리액트는 컴포넌트로 구성이 되어있다는 말을 많이 들었을 것이다.
   각 컴포넌트는 독립적이고 재사용이 가능하여 유지보수가 용이하다. 

    컴포넌트란?
    리액트의 구성요소.
    리액트를 이루는 가장 최소한의 단위
    "props”라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다.


2. 상태(state) 와 속성(props)
    상태(state):
    쉽게 말해서 변수, 변할 수 있는 값이다. 
    어떤 시스템이나 프로그램의 현재 상황이나 정보를 나타내기 때문에 값이 변하면 상태가 변한다 
    컴포넌트 내부에서 관리되는 동적인 데이터
    상태가 변경되면 해당 컴포넌트는 다시 렌더링된다. => 정리: 컴포넌트 내부에서 관리되는 이벤트에 의해 변경되는 동적인 값

    속성(props):
    부모 컴포넌트가 자식 컴포넌트에게 전달하는 데이터
    읽기 전용이며 자식 컴포넌트에서 직접 수정할 수 없다. 

3. 단방향 데이터 흐름
     리액트에서는 데이터가 부모-> 자식으로 단방향으로 흐른다. 
     상위 컴포넌트는 하위 컴포넌트에 props 를 통해 데이터를 전달하고 하위 컴포넌트는 이를 받아 UI 에 업데이트 한다. 
     -> 즉 귀찮은 과정들과 불필요한 과정들이 포함될 수밖에 없고 코드가 복잡해지면 복잡한 상태들을 관리해야한다.

 

2. props drilling 

이미지 출처: https://medium.com/geekculture/props-drilling-v-s-context-api-which-one-is-the-best-75c503d21a65

 

이같은 작동원리를 가지고 있기 때문에 props drilling 과 같은 문제가 발생할 수 있다. 

props drilling 이란 필요한 데이터가 여러 단계의 컴포넌트를 거쳐 전달되는 과정을 말한다. 아주아주 비효율적이다! 

따라서.. 중간에 있는 컴포넌트들은 실제로 그 데이터를 사용하지 않지만 단지 전달하기 위해 props 를 받아야하는 경우가 많아진다.

이는 코드를 복잡하게 만들고 불필요한 과정을 거쳐 유지보수를 어렵게 할 수 있다. 

 

이러한 문제를 해결하기 위해 contextAPI 라는 React 내장라이브러리가 생겼다.

 

3. 상태관리를 해야하는 이유!

이러한 props drilling 때문에 각 컴포넌트 간의 직접적인 데이터 전달이 어려워서 데이터를 부모 컴포넌트에 보내고 다시 해당 상태 데이터를 필요한 컴포넌트로 전달해야 하기 때문에 props 의 출처를 찾기 어렵고 사용자가 애플리케이션 내에서 수행하는 작업의 상태를 추적하는 것이 매우 어렵다

(그렇다면 애플리케이션이 복잡해질수록..꼭 해야하겠군!!!!) 

 

 

- * 그렇다면 어떤 기능들을 상태라고 분류지을 수 있을까?

예시: 

1. 사용자 인증 상태:
   • 로그인 여부
   • 사용자 정보 (예: 사용자 이름, 이메일, 프로필 사진 등)
   • 인증 토큰
2. UI 상태:
   • 현재 활성화된 화면 또는 탭
   • 모달 창의 열림/닫힘 상태
   • 폼 입력 값
   • 로딩 스피너 또는 진행 바의 표시 여부
   • 테마 설정 (예: 다크 모드, 라이트 모드)
3. 네트워크 상태:
   • 데이터 요청 중 로딩 상태
   • 네트워크 연결 상태 (온라인/오프라인)
   • API 응답 데이터
4. 애플리케이션 데이터:
   • 사용자 프로필 정보
   • 게시물, 댓글, 좋아요 등의 소셜 데이터
   • 상품 목록, 장바구니 내용, 주문 내역 등의 전자 상거래 데이터
   • 즐겨찾기, 북마크, 알림 설정 등
5. 폼 및 입력 상태:
   • 입력 폼의 값
   • 폼 검증 결과 및 에러 메시지
   • 입력 필드의 포커스 상태
6. 알림 상태:
   • 새로운 알림 여부
   • 알림 목록
   • 읽지 않은 알림 개수
7. 위치 및 지도 상태:
   • 사용자의 현재 위치
   • 지도에서 선택한 위치 또는 핀
   • 경로 안내 정보
8. 멀티미디어 상태:
   • 오디오/비디오 재생 상태 (재생, 일시 정지, 정지)
   • 현재 재생 중인 미디어 정보
   • 볼륨 및 재생 시간
9. 애플리케이션 설정:
   • 언어 설정
   • 알림 설정 (푸시 알림, 이메일 알림 등)
   • 사용자 맞춤 설정 (예: 글꼴 크기, 색상 테마)
10. 상태 관리 라이브러리 상태:

• 전역 상태 (전역에서 접근 가능한 상태)
• 로컬 상태 (특정 컴포넌트 내에서만 사용되는 상태)

 

상태관리라이브러리-redux 

https://khw063011.tistory.com/74

[react] redux와 redux-toolkit

 

 

 

4. Context 란?

• 컴포넌트 트리의 깊숙한 곳에 있는 컴포넌트가 필요로 하는 데이터를 직접 제공하도록 한다.
• 중간 컴포넌트들이 불필요하게 데이터를 전달할 필요가 없어진다. 
• 데이터의 공유를 용이하게 해준다.
• 컨텍스트 값을 생성하고 해당 값을 제공하고 컨텍스트를 묶어주는데 다수의 컴포넌트, 앱의 모든 컴포넌트를 묶어주어서 트리구조였던 기존의 방식에서 벗어나 서로서로 바로 접근이 가능하도록 해준다. 

 

 

장점: 

• State(상태) 와의 연결이 쉽다

 

즉 정리해보자면 리액트는 트리구조와 단방향 구조로 이루어져 있기 때문에 a-> b -> c 라는 구성으로 이루어져 있다고 쳐보자.

그러면 a-> c 가 불가능한 구조이다. 무조건 b 를 거쳐야하는 구조이기 때문에 매우 비효율적임을 알 수 있다. 

따라서 a-> c 가 가능해지도록 필요한 데이터들을 빼놓고 바로 접근이 가능하도록  전역에서 관리하는 것이다. 

 

이미지 출처: https://medium.com/geekculture/props-drilling-v-s-context-api-which-one-is-the-best-75c503d21a65

 

이렇게 하면 불필요했던 중간과정을 없애고 서로서로 바로 접근이 가능하다.