리액트와 리덕스

리액트 → 사용자 정의 태그 = 컴포넌트로 체계적인 애플리케이션 만드는 기술

리덕스 → 상태를 중앙 관리해 데이터 변형 사고 방지 …

두 개 모두 개발의 복잡성을 낮춤… 리액트는 ‘소문'처럼, 리덕스는 ‘미디어'처럼 데이터 주고 받음

하지만 리액트는 모든 컴포넌트가 render() 함수 호출 + 모든 컴포넌트끼리 연결되어야 함

리액트와 리덕스를 연결해주는 라이브러리 react-redux → 필요한 컴포넌트에게만 전달 !

리덕스 없이 리액트 앱 만들기

import React from 'react';

import AddNumberRoot from './Components/AddNumberRoot';
import DisplayNumberRoot from './Components/DisplayNumberRoot';

function App() {
  return (
    <div className="App">
      <h1>Root</h1>
      <AddNumberRoot></AddNumberRoot>
      <DisplayNumberRoot></DisplayNumberRoot>
    </div>
  );
}

export default → import시 컴포넌트를 사용할 수 있게 함

이 상태에서 상태 관리가 도입되면, 깊은 depth에 있는 컴포넌트와 외부의 컴포넌트 상호작용 시 굉장히 복잡함

리덕스 녹이기

npm install redux로 리덕스 설치부터!

// store.js
import { configureStore } from 'redux';

export default configureStore(function(state, action){
    if ( state === undefined ) {
        return { number: 0 } // 초기값
    }
    if ( action.type === 'INCREMENT') {
        return { ... state, number: state.number + action.size }
    }
    return state;
}, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()); // dev툴 사용을 위함

import React, {Component} from 'react';
import store from '../store';

export default class DisplayNumber extends Component {
  state = { number: store.getState().number } // store에서 number 가져오기 
  constructor(props) {
    super(props); // 반드시 먼저 실행 ! 
    store.subscribe(function() { // 변경 시 render() 재 호출을 위한 subscribe
      this.setState({number: store.getState().number});
    }.bind(this));
  }
    render() {
      return (
        <div>
          <h1>Display Number</h1>
          <input type="text" value={this.state.number} readOnly></input>
        </div>
      )
    }
  }