React, Redux, 그리고 React-redux에 대하여 알아보자

1. React 📌

1-1. React의 개념

React는 웹 프레임워크로, 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용되는 프로그램이다. React는 Javascript에 HTML을 포함하는 JSX(Javascript XML)이라는 간단한 문법과 단방향 데이터 바인딩(One-way Data Binding)을 사용하고 있다. 그리고, 가상 돔(Virtual DOM)이라는 개념을 사용하여 웹 애플리케이션의 퍼포먼스를 최적화한 라이브러리이다.
Angular, Vue등 다른 프레임워크와는 달리 리액트는 오로지 View만을 담당하는 라이브러리인만큼 내장되어 있는 기능이 부족해 third-party 라이브러리(react-router-dom, redux)를 함께 사용한다.

• React는 facebook에서 제공해주는 프론트엔드 라이브러리
• 싱글 페이지 애플리케이션이나 모바일 애플리케이션 개발 시 사용
• React를 사용하지 않아도 html과 css, 그리고 javascript로 웹 페이지를 만들 수 있지만, react를 이용해 사용자와 상호작용할 수 있는 동적인 UI를 쉽게 만들 수 있기 때문에 많이 이용됨

1-2. React의 장점

• React는 자기만의 문법을 가진 Angular,Vue와 달리 자바스크립트 문법을 그대로 사용

• 컴포넌트를 더 단순하고 간단하게 정의 가능

• React Native등의 웹이 아닌 플랫폼에서도 활용 가능한 기술

• React는 가상 돔을 사용하여 웹 애플리케이션의 성능을 극대화 시킴

  (*가상 돔에 대해서는 따로 포스팅을 할 예정이다.)

2. Redux 📌

2-1. Redux의 개념

Redux는 Javascript 상태관리 라이브러리이다. 여기서 말하는 상태(State)란, 컴포넌트 내부에서 사용되는 데이터이다.

• Redux의 원칙으로 동일한 데이터는 항상 같은 곳에서 가져옴
• 스토어라는 하나 뿐인 데이터 공간
• 리액트에서는 setState 메소드를 활용해야만 상태 변경 가능
• 리덕스에서도 action이라는 객체를 통해서만 상태 변경 가능
• 변경은 순수함수로만 가능
• Store(스토어) - Action(액션) - Reducer(리듀서)

2-2. Store, Action, Reducer의 정의

Store (스토어)

Store는 상태가 관리되는 하나의 공간이다.

• 컴포넌트와는 별개로 스토어라는 공간이 있어서 그 스토어 안에 앱에서 필요한 상태를 담음
• 컴포넌트에서 상태 정보가 필요할 때 스토어에 접근

Action (액션)

• Action은 앱에서 스토어에 운반할 데이터를 의미함 (주문서와 같다)
• Action은 Javascript 객체 형식으로 이루어짐

Reducer (리듀서)

• Action을 Store에 바로 전달하는 것이 아닌, Reducer에 전달함
• Reducer가 주문을 받고 Store의 상태를 업데이트
• Action을 Reducer에 전달하기 위해서는 dispatch()메소드를 사용

Dispatch (디스패치)

• Dispatch는 store의 내장 함수 중 하나로, action을 발생시킴
• action을 파라미터로 전달하고 reducer를 호출

즉, Action 객체가 dispatch() 메서드에 전달 → dispatch()를 통해 Reducer를 호출 → Reducer는 새로운 Store를 생성

2-3. Redux의 장점

• 순수 함수를 사용해 상태를 예측 가능하게 만듦
• 유지보수에 용이
• redux dev tool이 있어 디버깅에 유리
• 비동기를 지원하는 Redux Saga, Redux Thunk 등 다양한 미들웨어 존재

2-4. Redux는 언제 쓰는게 좋을까?

• 전역 상태가 필요하다고 느껴질 때 (전역 상태?)
• 상태들이 자주 업데이트 될 때
• 상태를 업데이트하는 로직이 복잡할 때
• 앱이 크고 많은 사람들에 의해 코드가 관리될 때
• 상태가 업데이트되는 시점을 관찰할 필요가 있을 때

3. React-redux 📌

React는 자체적으로 state와 props를 관리할 수 있지만 컴포넌트가 많아지고 깊어지면 state의 값을 관리하기가 피곤해진다.
Redux는 state를 편하게 관리하기 위한 목적으로 사용된다.
말그대로, React-redux는 react와 redux를 연결해주는 라이브러리이다.
때문에, React-redux가 제공하는 함수는 대부분 연결하는 기능을 제공한다.

3-1. React-redux의 Provider

• Provider는 connect() 함수에 포장 된 모든 컴포넌트가 Redux Store를 사용할 수 있게 함
• 때문에, 대부분의 애플리케이션은 전체 앱의 최상위 레벨에서 Provider를 바인딩 함
• Provider의 Props로는 store가 있으며, 이는 애플리케이션의 Redux Store임

Provider 사용 예시(/src/index.js)

import React from "react";
import ReactDOM from "react-dom";
// Provider는 react-redux 라이브러리에서 가져온다.
import { Provider } from "react-redux";
// createStore는 redux에서 가져온다.
import { createStore } from "redux";
import App from "./components/App";
import reducers from "./reducers";
ReactDOM.render(
// connect()함수에 포함된 모든 컴포넌트가 redux store를 사용할 수 있기 위해,
// Provider는 최상위 레벨에서 렌더링 된다
// provider의 props로 store가 있으며 redux store를 할당한다.
 <Provider store={createStore(reducers)}>
   <App />
 </Provider>,
 document.querySelector("#root")
);

Prodiver는 최상위 레벨(root파일이 있는 index.js)에서 App.js 컴포넌트를 감싼다.
이를 통해 connect()가 포함된 모든 컴포넌트가 redux store를 사용할 수 있게 된다.

3-2. connect() 함수

• connect()함수는 React 컴포넌트를 Redux Store에 연결함
• connect()로 연결한 컴포넌트는 필요한 데이터(state)를 store에서 받아옴
• connect()를 통해 컴포넌트의 이벤트로 호출 된 action을 store로 전송 가능 (dispatch)

connect()함수 사용 예시

import React from 'react'
// react-redux 라이브러리에서 connect를 가져옴
import { connect } from 'react-redux;
class 예시컴포넌트 extends Component {
  render(){
    return(
    <>
      <div>
       예시 컴포넌트의 내용
	  <div>
    </>
    )
 } 
// connect()로 컴포넌트와 redux store 연결하기
export default connect(null)(예시컴포넌트)