React 기초 다지기 #2

13882 단어 reduxroutingredux

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

좋은 웹페이지 즐겨찾기