スパルタコードクラブ-反応3週間(10)


1.構成部品の冗長データを使用します。


1-1. 構成部品で反転動作を使用する方法!
  • クラスの構成部品で冗長データを使用!
  • (1). reduceモジュールとconnect関数を読み込みます.
  • (2). ステータス値を取得する関数と、アクション生成関数を呼び出す関数を作成します.
  • (3). コンポーネントとショップをconnectで接続します.
  • (4). コンソールのこれ道具を撮ってみます.
  • (5). this.stateのリストを削除し、ショップの値に置き換えます.
  • (6). setStateをthisに設定します.props.createに変更
  • App.js
  • 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. 関数構成部品で冗長データを使用!
  • BucketList.js
  • BucketList.ユーザーセレクタ()をjsに適用!
  • // 리액트 패키지를 불러옵니다.
    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;