React (Redux , Context API, 클래스형과 함수형)

리액트의 상태 관리

• 애플리케이션이 커짐에 따라 상태가 어떻게 구성되고 구성 요소 간에 데이터가 어떻게 흐르는 지에 대해 더 의도적으로 생각하는 것은 도움이 된다.
• 중복되거나 중복된 상태는 버그의 일반적인 원인이다.

Redux

• 리덕스는 자바스크립트 애플리케이션에서 상태 관리를 간편하게 하기 위해 사용하는 대표적인 라이브러리 중 하나이다. 특히, 리액트와 함께 자주 사용되지만 리덕스는 리액트에 한정되지 않고 모든 자바스크립트 애플리케이션에서 사용할 수 있다.

리덕스의 핵심 개념

• 스토어
  • 애플리케이션의 상태를 담고 있는 객체이다. 스토어는 단 하나만 존재하며, 이 곳에 애플리케이션의 모든 상태가 저장된다.
• 액션
  • 상태를 변화시키기 위한 의도를 나타내는 객체이다. 액션은 ‘type’ 이라는 속성을 필수적으로 가져야 하며, 이 외에도 상태 변화를 위한 추가 데이터를 포함할 수 있다.
• 리듀서
  • 액션을 받아 상태를 업데이트하는 함수이다. 이전 상태와 액션을 인자로 받아 새로운 상태를 반환하는 순수 함수이다.
• 디스패치
  • 액션을 스토어에 전달하는 함수이다. 디스패치된 액션은 리듀서를 통해 상태를 업데이트되게 한다.
• 구독
  • 상태가 변경될 때마다 특정 동작을 실행하도록하는 함수이다. 리덕스는 상태가 변경되면 자동으로 리액트 컴포넌트를 다시 렌더링하게 할 수 있다.

리덕스의 작동 원리

graph TD;
    A[사용자의 이벤트 발생] --> B[특정 액션 생성];
    B --> C[디스패치];
    C --> D[리듀서로 전달];
    D --> E[전달받은 액션 + 현재 상태];
    E --> F[새로운 상태가 스토어에 저장];
    F --> G[스토어 상태 업데이트, 해당 상태 구독 시 컴포넌트 재렌더링]

리덕스의 장점

• 예측 가능하다
  • 상태 변화가 예측 가능하게 이루어지므로 애플리케이션의 동작을 쉽게 파악할 수 있다.
• 중앙 집중식 관리
  • 모든 상태가 하나의 스토어에서 관리되기 때문에 상태를 추적하기 쉽다.
• 디버깅 용이성
  • 리덕스 개발 도구를 통해 상태 변화 과정을 시각적으로 확인할 수 있어 디버깅이 용이하다.
• 유연성
  • 미들웨어를 활용해 비동기 작업이나 로직, 에러 처리 등을 쉽게 추가할 수 있다.

Redux-saga

• 리덕스 애플리케이션에서 비동기 작업을 관리하기 위한 미들웨어
• 리덕스 자체는 동기적인 상태 관리에 초점을 맞추기 때문에 비동기 로직을 처리하는 데 추가적인 도구가 필요하기 때문에 만들어졌다.

리덕스 사가의 작동 원리

graph TD;
    A[특정 액션 디스패치] --> B[Watcher Saga가 감지];
    B --> C[액션에 따른 Worker Saga 실행];
    C --> D[비동기 작업 수행];
    D --> E[수행 결과에 따라 액션 재디스패치];
    E --> F[리듀서의 상태 업데이트];
   

Redux-saga를 사용하는 이유

• 리덕스 애플리케이션에서 비동기 작업이 복잡해질수록 단순한 상태관리에는 한계가 있다.
• 복잡한 API 호출 순서, 타이밍, 에러 처리 등의 작업이 필요한 경우 매우 유용하다.

옵저버블

• 옵저버블은 비동기 데이터 스트림을 관리하는 개념이다.
• 주로 리액티브 익스텐션 라이브러리를 통해 사용된다.
• 함수형 프로그래밍과 반응형 프로그래밍의 개념을 결합하여 데이터 흐름을 효율적으로 처리하는 도구이다.

옵저버블의 장점

• 조합성
  • 여러 데이터 스트림을 조합하거나 변환할 수 있어 복잡한 비동기 로직을 간결하게 표현할 수 있다.
• 유연성
  • 옵저버블은 데이터를 처리하는 시점을 제어할 수 있어 실시간 데이터 흐름을 다루는 데 유리하다.
• 함수형 프로그래밍
  • 순수 함수와 연산자를 사용하여 데이터를 처리하는 함수형 프로그래밍 스타일 지원한다.

옵저버블과 프로미스 비교

• 프로미스
  • 단일 비동기 작업의 결과를 나타낸다. 작업이 완료되면 하나의 값을 반환한다.
• 옵저버블
  • 여러 비동기 이벤트의 스트림을 나타낸다. 여러 개의 값을 발행할 수 있으며, 데이터 흐름을 제어할 수 있다.

Context-API

• 전역적으로 데이터를 관리하고 여러 컴포넌트 간에 쉽게 데이터를 공유할 수 있도록 도와주는 기능
• 일반적으로 리액트에서는 데이터가 부모에서 자식 컴포넌트로 props를 통해 전달하지만 깊게 중첩된 컴포넌트 구조에서는 이 방식이 비효율적이기 때문에 사용한다.

Context API의 주요 개념

• Context
  • 전역적으로 관리하고 있는 데이터를 저장하는 컨테이너 역할.
  • React.createContext() 함수를 사용하여 생성된다.
  • 생성된 Context는 Provider과 Consumer을 통해 데이터를 주고 받습니다.
• Provider
  • Context에서 제공하는 컴포넌트로 데이터를 전달하는 역할을 한다. Provider은 컴포넌트 트리에서 Context를 구독하는 하위 컴포넌트에게 값을 전달한다. 이 때 Value 속성을 통해 전달할 데이터를 정의한다.
• Consumer
  • Context에서 제공하는 또 다른 컴포넌트로 데이터를 소비하는 역할을 한다. Consumer은 Context로부터 전달된 데이터를 받아 사용하는 컴포넌트이다. 함수형 컴포넌트는 useContext 훅을 사용하여 더 간단하게 Context 데이터를 소비할 수 있다.
• useContext
  • 함수형 컴포넌트에서 Context를 쉽게 사용할 수 있게 도와주는 리액트 훅이다. Consumer를 사용하는 것보다 코드가 간결해지고 직관적으로 Context에 접근할 수 있다.

Context API의 장점

• Prop Drilling 방지
  • 부모에서 자식으로 일일이 ‘Props’를 전달 해야하는 번거로움을 해결할 수 있다. 이를 통해 코드가 더 간결하고 관리하기 쉬워진다.
• 전역 상태 관리
  • Context API를 사용하면 애플리케이션 전역에서 상태를 관리하고 필요한 곳에서 쉽게 접근할 수 있다. 간단한 상태 관리에서 리덕스 같은 라이브러리 없이도 Context API만으로 충분히 해결할 수 있다.
• 재사용성
  • Context를 통해 전역적으로 데이터를 관리하면 특정 상태나 설정을 여러 컴포넌트에서 재사용할 수 있다

클래스형과 함수형의 차이

클래스형 컴포넌트

• ES6을 사용하여 정의된다.
• 상태와 라이프사이클 메서드를 사용하여 컴포넌트의 동작을 제어한다.
• this 키워드를 사용해 상태 및 메서드에 접근한다.
• 장점
  • 상태와 라이프사이클 관리
    • 클래스형 컴포넌트는 상태를 관리하고, 라이프사이클 메서드를 사용하여 컴포넌트의 생명주기를 제어할 수 있다.
  • 오래된 프로젝트에서 많이 사용
    • 리액트 초기에는 상태 관리와 라이프사이클 메서드를 사용해야 할 때 클래스형 컴포넌트가 필수적이다.

함수형 컴포넌트

• 단순한 자바스크립트 함수로 정의
• React Hooks를 사용하여 상태 및 라이프사이클을 관리할 수 있다.
• useState, useEffect 등 다양한 훅을 사용하여 클래스형 컴포넌트에서 사용했던 기능들을 함수형 컴포넌트에서 쉽게 구현할 수 있다.
• 장점
  • 간결한 코드
    • this 피워드가 필요하지 않아 코드 작성이 더 쉽다.
  • React Hooks의 도입
    • 훅을 사용해 상태 관리, 사이드 이펙트 처리 등을 할 수 있으며, 함수형 컴포넌트에서도 클래스형 컴포넌트의 기능을 모두 사용할 수 있다.
  • 재사용성 및 테스트 용이성
    • 함수형 컴포넌트는 일반 함수처럼 동작하므로, 재사용성과 테스트가 더 용이하다.

라이프사이클 메소드

라이프사이클의 단계

1. 마운팅
   • 컴포넌트가 DOM에 처음 추가될 때 호출되는 메소드
2. 업데이트
   • 컴포넌트가 업데이트될 때 호출되는 메소드
3. 언마운팅
   • 컴포넌트가 DOM에서 제거될 때 호출되는 메소드

---

출처

https://react.dev/learn/managing-state