React 기초 다지기 #2
SPA(Single Page Application): 서버에 주는 html 파일이 1개다. (React가 대표적인 예)
SPA 사용이유?
- 사용성 때문에
- 페이지를 이동할 때마다 서버에서 주는 html 화면을 바꾸다보면 상태 유지가 어렵다.
단점은 없나?
- SPA는 한 번 정적자원을 내려받다보니, 처음에 모든 컴포넌트를 받아내린다. 그러므로, 로딩속도가 느릴 수 있다.
라우팅이란?
- 한개뿐인 HTML파일로 여러개의 주소로 넘어가게 할 수 있는 방법
라우팅을 통해서 화면전환하기
- index.js에 BrowserRouter 적용하기
- 세부화면 만들기
- App.js에 Route 적용하기
- exact 적용하기
- URL 파라미터 사용하기
- 링크 이동시키기
import React from "react";
import {render} from "react-dom";
import {Route} from "react-router-dom;
import Dog from "./Dog";
import Cat from "./Cat";
import Home from "./Home"
class App extends React.Component{
constructor(props){
super(props);
this.state = {};
}
render(){
return (<div className = "App">
<Route exact path = "/" component = {Home}>
<Route path = "/cat" component = {Cat}>
<Route path = "/Dog" component = {Dog}>
</div>
);
URL 파라미터 사용하기
- 웹사이트에는 파라미터와 쿼리가 찍힌다. 그 중에서 파라미터를 사용하는 방법에 대해서 알아보자
파라미터 : /cat/nabi
쿼리 :/cat?name = nabi
import React from "react";
import {render} from "react-dom";
import {Route} from "react-router-dom;
import Dog from "./Dog";
import Cat from "./Cat";
import Home from "./Home"
class App extends React.Component{
constructor(props){
super(props);
this.state = {};
}
render(){
return (<div className = "App">
<Route exact path = "/" component = {Home}></Route>
<Route path = "/Cat:cat_name" component = {Cat}></Route>
<Route path = "/Dog" component = {Dog}></Route>
</div>
);
import React from "react";
const Cat = (props) => {
return(<div>내 고양이 이름은 {props.match.params.cat_name}입니다.</div>)
export default Cat;
History 사용하기
- Link 컴포넌트를 이용하지 않고, 조금 더 함수를 사용한 페이지 전환에 대해서 알아보자.
import {withRouter} from "react-router";
class App extends React.Component { //constructor, state, render부분은 생략하겠다.
<button onClick = {() => {this.props.history.push('/cat/nabi');}}></button>
<button onClick = {() => {this.props.history.goBack()}}</button>
export default withRouter(App);
라우팅, 조금 더 꼼꼼히 쓰려면?
- Not Found 컴포넌트를 만든다.
- Switch 구문을 Route되는 컴포넌트에 씌운다.
- 루트하나를 생성해서 Switch 구문안에다가 넣는다.
리덕스
- 전역으로 데이터 관리를 하게해주는 좋은 친구
- 리덕스 패키지 설치하기
yarn add redux react-redux
리덕스는 데이터를 한군데에 몰아넣고, 여기저기에서 꺼내볼 수 있게 도와주는 친구.
State: 리덕스에서 저장하고 있는 상태값(data)을 의미한다. 딕셔너리 형태{[key]:value}를 지니고 있다.
Action: 상태에 변화가 필요할 때 발생하는 친구.
{type: 'CHANGE_STATE', data: {...}}
ActionCreator: 액션 생성함수이다. 액션을 만들기 위해 쓰이는 함수.
Reducer: 리덕스에 저장되어있는 데이터를 변경하는 함수.
Store: 프로젝트에 리덕스를 적용하기 위해 쓰이는 것
스토어에서는 리듀서, 현재 어플리케이션 상태, 리덕스에서 값을 가져오고 액션을 호출하기 위한 몇가지 내장함수가 포함되어 있다.
Dispatch: 액션을 발생시키는 역할을한다 (정말 많이 쓰인다)
Redux를 만드는 STEP:
- Action
- initialState
- Action Creator
- Reducer (여기까지 redux 모듈 하나를 완성하는 것이다)
- Store
컴포넌트에서 리덕스 데이터 사용하는 방법
클래스 형 컴포넌트
- 리덕스 모듈과 connect함수를 불러온다.
- 상태값을 가져오는 함수와 액션 생성 함수를 불러오는 함수를 만들어준다 (Dispatch)
- connect로 컴포넌트와 함수를 이어준다.
- 콘솔에 this.props 찍어본다
- this.state에 있는 list지우고 스토어에 있는 값으로 교체
- setState를 this.props.create로 바꾼다
Author And Source
이 문제에 관하여(React 기초 다지기 #2), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@moony_moon/React-기초-다지기-2저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)