<결과화면>
SPA이란?
Single Page Application
서버에서 주는 html이 1개 뿐인 어플리케이션
전통적인 웹사이트는 페이지를 이동할 때마다 서버에서 html, css, js(정적자원)을 내려준다면,
SPA는 딱 한번만 정적자원을 받아온다.
라우팅이란?
SPA는 html을 하나 가지고 있지만 브라우저 주소창대로 다른 페이지를 보여줄 수 있다.
이렇게 브라우저 주소에 따라 다른 페이지를 보여주는 것을 라우팅이라고 한다.
(1) react-route-dom패키지 설치
yarn add react-router-dom
(2) index.js에서 BrowserRouter적용
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from "react-router-dom";
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
|
cs |
(3) 넘어갈 페이지 만들기
버킷 리스트에서 항목을 클릭하면 상세 페이지로 넘어갈 것임
Detail.js
1
2
3
4
5
6
7
8
|
import React from "react";
const Detail = (props) => {
return <h1>상세 페이지입니다!</h1>;
};
export default Detail;
|
cs |
(4) 적용하기
- 넘겨줄 props가 없을때
<Route path="주소[/home 처럼 /와 주소를 적어요]" component={[보여줄 컴포넌트]}/>
- 넘겨줄 props가 있을때
<Route path="주소[/home 처럼 /와 주소를 적어요]" render={(props) => (<BucketList list={this.state.list} />)} />
App.js
- import하기
- Route에서 이동할 페이지 설정하기
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
|
import React from "react";
import { withRouter } from "react-router";
import { Route } from "react-router-dom";
import BucketList from "./BucketList";
import styled from "styled-components";
import Detail from "./Detail";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
list: ["영화관 가기", "매일 책읽기", "수영 배우기"],
};
this.text = React.createRef();
}
componentDidMount() {
console.log(this.text);
}
addBucketList = () => {
let list = this.state.list;
const new_item = this.text.current.value;
this.setState({ list: [...list, new_item] });
};
render() {
return (
<div className="App">
<Container>
<Title>내 버킷리스트</Title>
<Line />
<Route
path="/"
exact
render={(props) => <BucketList list={this.state.list} history={this.props.history}/>}
/>
<Route path="/detail" component={Detail}/>
</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 적용
export default withRouter(App);
|
cs |
BucketList.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
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;
|
cs |
728x90
'WEB > REACT' 카테고리의 다른 글
[REACT] 리덕스란? 개념, 용어, 상태관리 흐름도, 특징 3가지 (0) | 2021.06.28 |
---|---|
[REACT] 올바르지 않은 주소 페이지 라우팅하기/ history로 이전 페이지 기록 간직하기 (0) | 2021.06.27 |
[REACT] 이미지 좌우 스와이프 퀴즈 페이지 만들기 (0) | 2021.06.27 |
[REACT] 이벤트 리스너 등록 / mouseover이벤트 (0) | 2021.06.27 |
[REACT] 버킷리스트에 input에 넣은 텍스트를 추가하기 (0) | 2021.06.27 |