항해중인 개발자

라우트 0327 본문

React

라우트 0327

바다를바라보다 2021. 3. 27. 23:32

히스토리를 쓰려면 withRouter를 가져와야 한다

 

그리고 밑의 export를

export default withRouter(App); 이렇게 만들기

 

 

라우트 안에 path를 /(메인페이지) 로 설정해주고 렌더로 버킷리스트 페이지를 출력해준다

버킷리스트가 메인페이지

 

히스토리 객체를 props 형태로 버킷리스트로 넘겨준다

 

 

App.js

import React from "react";
import logo from "./logo.svg";
// BucketList 컴포넌트를 import 해옵니다.
// import [컴포넌트 명] from [컴포넌트가 있는 파일경로];
import BucketList from "./BucketList";
import styled from "styled-components";
import { Route } from "react-router-dom";
import Detail from "./Detail";
import { withRouter } from "react-router";

// 클래스형 컴포넌트는 이렇게 생겼습니다!
class App extends React.Component {
  constructor(props) {
    super(props);
    // App 컴포넌트의 state를 정의해줍니다.
    this.state = {
      list: ["영화관 가기", "매일 책읽기", "수영 배우기"],
    };
    // ref는 이렇게 선언합니다!
    this.text = React.createRef();
  }

  componentDidMount() {
    console.log(this.text);
  }

  addBucketList = () => {
    let list = this.state.list;
    const new_item = this.text.current.value;

    // 리액트에서는 concat으로 배열항목을 합쳐주는 게 좋아요. 아래처럼요!
    // list = list.concat(new_item);
    // this.setState({list: list});

    //  이건 가장 편한 배열 합치기 방법입니다.
    //  ...은 배열 안에 있는 항목을 전부 꺼내서 늘어놓는다는 뜻입니다. (스프레드 문법이라고 불러요.)
    this.setState({ list: [...list, new_item] });
  };

  // 랜더 함수 안에 리액트 엘리먼트를 넣어줍니다!
  render() {
    return (
      <div className="App">
        <Container>
          <Title>내 버킷리스트</Title>
          <Line />
          {/* 컴포넌트를 넣어줍니다. */}
          {/* <컴포넌트 명 [props 명]={넘겨줄 것(리스트, 문자열, 숫자, ...)}/> */}
          <Route
            path="/"
            exact
            render={(props) => (
              <BucketList history={this.props.history} list={this.state.list} />
            )}
          />

          <Route path="/detail" component={Detail} />
        </Container>
        {/* 인풋박스와 추가하기 버튼을 넣어줬어요. */}
        <Input>
          <input type="text" ref={this.text} />
          <button onClick={this.addBucketList}>추가하기</button>
        </Input>
      </div>
    );
  }
}

 

 

 

 

BucketList.js

 

App.js에서 넘겨받은 히스토리를 이용해 온클릭 이벤트로 히스토리 push("detail")로 설정해줘서 클릭시 상세보기로 이동하게해줌

// 리액트 패키지를 불러옵니다.
import React from "react";
import styled from "styled-components";

const BucketList = (props) => {
  console.log(props);
  const my_lists = props.list;

  return (
    <ListStyle>
      {my_lists.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;

 

Detail.js

import React from "react";

const Detail = (props) => {
  return <h1>상세 페이지입니다!</h1>;
};
export default Detail;

 

핵심은 withRouter를 사용해 히스토리 객체를 props 형태로 넘겨주며 

히스토리 객체의 기능을 이용해서 onClick 이벤트로 페이지간의 이동 구현을 할 수 있다는것

 

그리고 번외로 Route안에서 props 값을 이용해 메인페이지 설정과 렌더가 가능하다는 것

 <Route
            path="/"
            exact
            render={(props) => (
              <BucketList history={this.props.history} list={this.state.list} />
            )}
          />

'React' 카테고리의 다른 글

자바스크립트 필수문법  (0) 2021.03.28
리덕스 0327  (0) 2021.03.28
라우트 0327  (0) 2021.03.27
액션과 리듀서를 편하게 만들어주는 모듈  (0) 2021.03.26
프로토 타입이란?  (0) 2021.03.26
리액트 2주차 문법 돌아보기 함수 그리고 객체약간  (0) 2021.03.26
0 Comments
댓글쓰기 폼