[REDUX] Redux - 하위 컴포넌트, children 사용
Ex01. 하위 컴포넌트의 사용 - 이전 React에서 사용하듯이 사용 - Action과 Reducer, State 함수는 정의 했지만 사용하지 않음에 주의 - btn 클릭시 단순히 log 출력 // Ex01 App.js import React, { Component } from 'react'; import { connect } from 'react-redux'; class App extends Component { render() { console.log('App'); return ( ); } } class Com1 extends Component { render() { console.log('App'); return ( { console.log('com1'); } }>com1 btn1 ); } } c..
[REDUX] Redux 개념, 구조, 실습
Redux란? - 리액트에서 상태를 더 효율적으로 관리하는 데 사용하는 상태 관리 라이브러리 - 리덕스는 쉽게 설명하면 상태 관리의 로직을 컴포넌트 밖에서 처리 하는 것이다. - 리덕스를 사용하면 스토어라는 개체 내부에 상태를 담게 된다. - 리덕스를 사용하면 위 그림과 같이 스토어에서 모든 상태 관리가 일어난다. 상태에 어떤 변화를 일으켜야 할 때는 액션(Action) 이라는 것을 스토어에 전달한다. 액션은 객체 형태로 되어 있으며, 상태를 변화시킬 때 이 객체를 참조하여 변화를 일으킨다. 액션을 전달하는 과정은 디스패치(dispatch)라고 한다. - 스토어가 액션을 받으면 리듀서(Reducer)가 전달받은 액션을 기반으로 상태를 어떻게 변경시켜야 할지 정한다. 액션을 처리하면 새 상태를 스토어에 저..