티스토리 뷰
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 (
<div>
<Com1 />
</div>
);
}
}
class Com1 extends Component {
render() {
console.log('App');
return (
<div>
<button onClick={
() => {
console.log('com1');
}
}>com1 btn1</button>
</div>
);
}
}
const mapActionToProps = (dispatch) => {
console.log('actionTo() call');
console.log('Action');
return {
onMyClick: () => {
dispatch({
type: "MYCLICK",
text: '...'
})
},
onAgeClick: () => {
dispatch({
type: "AGECLICK",
})
},
}
}
export function reducer(state = { num: 10, age: 100 }, action) {
console.log('reduce');
switch (action.type) {
case "MYCLICK":
console.log(state.num);
state = {
...state,
num: state.num + 1,
}
return state;
case "AGECLICK":
state = {
...state,
age: state.age - 1,
}
return state;
default: return state
}
}
function mapStateToProps(state) {
console.log('state');
return {
num: state.num,
age: state.age,
}
}
export default connect(
// null을 잡으면 연결고리가 끊긴다.
// mapStateToProps(null),
// mapActionToProps(null),
mapStateToProps,
mapActionToProps,
)(App);
Ex02. 하위 컴포넌트의 사용
- Action과 Reducer은 사용했지만 State를 사용하지 않음에 주의
- btn 클릭시 onMyClick Action 발생
// Ex02 App.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
// step1 - Component
class App extends Component {
render() {
console.log('App');
return (
<div>
{/* Com1 tag를 사용하지 않고 Ctn 태그로 사용 */}
<Ctn/>
</div>
);
}
}
class Com1 extends Component {
render() {
console.log('App');
return (
<div>
<button onClick={
this.props.onMyClick
}>com1 btn1</button>
</div>
);
}
}
// step2 - Action
// 컴포넌트와 리듀스와의 중간 역할을 한다.
const mapActionToProps = (dispatch) => {
console.log('actionTo() call');
console.log('Action');
return {
onMyClick: () => {
console.log('onMyClick');
dispatch({
type: "MYCLICK",
})
},
}
}
// step3 - Reducer
// state 사용 안할 것이기 때문에 null로 초기화
export function reducer(state = null, action) {
switch (action.type) {
case "MYCLICK":
console.log('MyClick');
return state;
default: return state
}
}
// 함수, 누가 콜 해주지 않는다.
// connect 함수를 Ctn으로 사용하겠다.
const Ctn = connect(
null,
mapActionToProps,
)(Com1);
export default App;
Ex03. 하위 컴포넌트 사용
- State까지 모두 사용
- btn 클릭시 num값 +1
// Ex03 App.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
class App extends Component {
render() {
console.log('App');
return (
<div>
<h1>App</h1>
<Ctn/>
</div>
);
}
}
class Bpp extends Component {
render() {
console.log('Bpp');
return (
<div>
<h1>{this.props.num}</h1>
<button onClick={
this.props.onMyClick
}>Bpp btn</button>
</div>
);
}
}
const mapActionToProps = (dispatch) => {
console.log('actionTo() call');
console.log('Action');
return {
onMyClick: () => {
console.log('onMyClick');
dispatch({
type: "MYCLICK",
})
},
}
}
export function reducer(state = {num:0,}, action) {
switch (action.type) {
case "MYCLICK":
state = {
num:state.num+1
}
console.log('MyClick');
return state;
default: return state
}
}
function mapStateToProps(state) {
console.log('state');
return {
num : state.num,
}
}
const Ctn = connect(
mapStateToProps,
mapActionToProps,
)(Bpp);
export default App;
Ex04. 하위 컴포넌트 사용
- 핵심 : connect
- export는 코드에서 단 하나 밖에 존재 할 수 없기 때문에 Bpp는 const ctn을 통해 컨테이너를 생성하여 사용한다.
- 컨테이너를 사용하게 되면 태그를 사용할 때 컨테이너명 으로 사용을 해야 한다는 것에 주의
// Ex04 App.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
class App extends Component {
render() {
console.log('App');
return (
<div>
<h1>App</h1>
<button onClick={
this.props.onIncClick
}>Inc btn</button>
<Ctn/>
</div>
);
}
}
class Bpp extends Component {
render() {
console.log('Bpp');
return (
<div>
<h1>{this.props.num}</h1>
<button onClick={
this.props.onDecClick
}>Dec btn</button>
</div>
);
}
}
const mapActionToProps = (dispatch) => {
console.log('actionTo() call');
console.log('Action');
return {
onIncClick: () => {
console.log('onIncClick');
dispatch({
type: "INCCLICK",
})
},
onDecClick: () => {
console.log('onDecClick');
dispatch({
type: "DECCLICK",
})
},
}
}
export function reducer(state = {num:0,}, action) {
switch (action.type) {
case "INCCLICK":
state = {
num:state.num+1
}
console.log('IncClick');
return state;
case "DECCLICK":
state = {
num:state.num-1
}
console.log('DecClick');
return state;
default: return state
}
}
function mapStateToProps(state) {
console.log('state');
return {
num : state.num,
}
}
// export는 1개 밖에 할 수 없기 때문에 container 을 생성하여 사용한다.
const Ctn = connect(
mapStateToProps,
mapActionToProps,
)(Bpp);
export default connect(
mapStateToProps,
mapActionToProps,
)(App);
Ex05. 하위의 하위 컴포넌트 사용
- app는 action은 필요 없고 app에서 state만 연결
- bpp는 state X, action X, cpp만 컴포넌트로 연결
- cpp는 state의 값을 +1 증가
// Ex05 App.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
class App extends Component {
render() {
console.log('App');
return (
<div>
<h1>App</h1>
<Bpp/>
</div>
);
}
}
class Bpp extends Component {
render() {
console.log('Bpp');
return (
<div>
<h1>Bpp</h1>
<Ctn/>
</div>
);
}
}
class Cpp extends Component {
render() {
console.log('Cpp');
return (
<div>
<h1>Cpp</h1>
<h2>{this.props.num}</h2>
<button onClick={
this.props.onIncClick
}>Dec btn</button>
</div>
);
}
}
const mapActionToProps = (dispatch) => {
console.log('actionTo() call');
console.log('Action');
return {
onIncClick: () => {
console.log('onIncClick');
dispatch({
type: "INCCLICK",
})
},
}
}
export function reducer(state = {num:0,}, action) {
switch (action.type) {
case "INCCLICK":
state = {
num:state.num+1
}
console.log('IncClick');
return state;
default: return state
}
}
function mapStateToProps(state) {
console.log('state');
return {
num : state.num,
}
}
const Ctn = connect(
mapStateToProps,
mapActionToProps,
)(Cpp);
export default connect(
mapStateToProps,
// mapActionToProps,
)(App);
Ex06. children 사용 예제
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div>
<Bpp>tiger</Bpp>
<Cpp>lion</Cpp>
</div>
);
}
}
class Bpp extends Component {
render() {
// tag의 text의 값이 children으로 전달된다.
// tiger가 전달된다.
console.log(this.props.children);
return (
<div>
</div>
);
}
}
// tag의 text의 값이 children으로 전달된다.
// children : 예약어이기 때문에 바뀌면 안됨.
const Cpp = ({ children }) => {
console.log(children);
return (
<div>
</div>
);
};
export default App;
2019.08.12(월)
Redux - 하위 컴포넌트 사용
'Redux' 카테고리의 다른 글
| [REDUX] Redux 개념, 구조, 실습 (3) | 2019.08.10 |
|---|
댓글