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로 바꾼다