スパルタコードクラブ-反応3週間(10)
12556 ワード
1.構成部品の冗長データを使用します。
1-1. 構成部品で反転動作を使用する方法!
import React from "react";
import { withRouter } from "react-router";
import { Route, Switch } from "react-router-dom";
// import [컴포넌트 명] from [컴포넌트가 있는 파일경로];
import BucketList from "./BucketList";
import styled from "styled-components";
import Detail from "./Detail";
import NotFound from "./NotFound";
// 리덕스 스토어와 연결하기 위해 connect라는 친구를 호출할게요!
import {connect} from 'react-redux';
// 리덕스 모듈에서 (bucket 모듈에서) 액션 생성 함수 두개를 가져올게요!
import {loadBucket, createBucket} from './redux/modules/bucket';
// 이 함수는 스토어가 가진 상태값을 props로 받아오기 위한 함수예요.
const mapStateToProps = (state) => ({
bucket_list: state.bucket.list,
});
// 이 함수는 값을 변화시키기 위한 액션 생성 함수를 props로 받아오기 위한 함수예요.
const mapDispatchToProps = (dispatch) => ({
load: () => {
dispatch(loadBucket());
},
create: (new_item) => {
dispatch(createBucket(new_item));
}
});
// 클래스형 컴포넌트는 이렇게 생겼습니다!
class App extends React.Component {
constructor(props) {
super(props);
// App 컴포넌트의 state를 정의해줍니다.
this.state = {
};
// ref는 이렇게 선언합니다!
this.text = React.createRef();
}
componentDidMount() {
console.log(this.props);
}
addBucketList = () => {
const new_item = this.text.current.value;
this.props.create(new_item);
};
// 랜더 함수 안에 리액트 엘리먼트를 넣어줍니다!
render() {
return (
<div className="App">
<Container>
<Title>내 버킷리스트</Title>
<Line />
{/* 컴포넌트를 넣어줍니다. */}
{/* <컴포넌트 명 [props 명]={넘겨줄 것(리스트, 문자열, 숫자, ...)}/> */}
{/* Route 쓰는 법 2가지를 모두 써봅시다! */}
<Switch>
<Route
path="/"
exact
render={(props) => (
<BucketList
list={this.props.bucket_list}
history={this.props.history}
/>
)}
/>
<Route path="/detail" component={Detail} />
<Route
render={(props) => <NotFound history={this.props.history} />}
/>
</Switch>
</Container>
{/* 인풋박스와 추가하기 버튼을 넣어줬어요. */}
<Input>
<input type="text" ref={this.text} />
<button onClick={this.addBucketList}>추가하기</button>
</Input>
</div>
);
}
}
const Input = styled.div`
max-width: 350px;
min-height: 10vh;
background-color: #fff;
padding: 16px;
margin: 20px auto;
border-radius: 5px;
border: 1px solid #ddd;
`;
const Container = styled.div`
max-width: 350px;
min-height: 60vh;
background-color: #fff;
padding: 16px;
margin: 20px auto;
border-radius: 5px;
border: 1px solid #ddd;
`;
const Title = styled.h1`
color: slateblue;
text-align: center;
`;
const Line = styled.hr`
margin: 16px 0px;
border: 1px dotted #ddd;
`;
// withRouter 적용
// connect로 묶어줬습니다!
export default connect(mapStateToProps, mapDispatchToProps)(withRouter(App));
1-2. 関数構成部品で冗長データを使用!// 리액트 패키지를 불러옵니다.
import React from "react";
import styled from "styled-components";
// redux hook을 불러옵니다.
import {useDispatch, useSelector} from 'react-redux';
const BucketList = (props) => {
// 버킷리스트를 리덕스 훅으로 가져오기
const bucket_list = useSelector(state => state.bucket.list);
console.log(bucket_list);
return (
<ListStyle>
{bucket_list.map((list, index) => {
return (
<ItemStyle
className="list_item"
key={index}
onClick={() => {
props.history.push("/detail");
}}
>
{list}
</ItemStyle>
);
})}
</ListStyle>
);
};
const ListStyle = styled.div`
display: flex;
flex-direction: column;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
`;
const ItemStyle = styled.div`
padding: 16px;
margin: 8px;
background-color: aliceblue;
`;
export default BucketList;
URLパラメータを適用して、第//App.js
...
<Switch>
<Route
path="/"
exact
render={(props) => <BucketList history={props.history} />}
/>
<Route
path="/detail/:index"
render={(props) => <Detail match={props.match} history={props.history} />}
/>
<Route
render={(props) => <NotFound history={props.history} />}
/>
</Switch>
...
//BucketList.js
...
{bucket_list.map((list, index) => {
return (
<ItemStyle
className="list_item"
key={index}
onClick={() => {
// 배열의 몇번째 항목을 눌렀는 지, url 파라미터로 넘겨줍니다.
props.history.push("/detail/"+index);
}}
>
{list}
</ItemStyle>
);
})}
</ListStyle>
);
};
...
//Detail.js
// 리액트 패키지를 불러옵니다.
import React from "react";
// redux hook을 불러옵니다.
import { useDispatch, useSelector } from "react-redux";
const Detail = (props) => {
// 스토어에서 상태값 가져오기
const bucket_list = useSelector((state) => state.bucket.list);
// url 파라미터에서 인덱스 가져오기
let bucket_index = parseInt(props.match.params.index);
return <h1>{bucket_list[bucket_index]}</h1>;
};
export default Detail;
Reference
この問題について(スパルタコードクラブ-反応3週間(10)), 我々は、より多くの情報をここで見つけました https://velog.io/@tmdals3785/스파르타-코딩클럽-리액트-3주차10テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol