React 정리 #5

React 정리 #6

실습 #1

React Router 사용하기 위한 설치 파일
1. npm install react-router-dom
2. query-string
Router란?
- 알리바바와 40인의 도적에서 돌 문을 열때 '열려라 참깨~'를 외치면 해당 문이 열린다. 돌문이 세개~네개라면?
- 첫번째 돌문을 여는 주문은 ‘열려라 참깨’, 두번째 돌문은 ‘열려라 들깨’, 세번째 돌문은 ‘열려라 주근깨’ 일 경우, 각 돌문을 열기위한 주문을 쏴주어야 한다. 각 경로로 가기 위하여 분배시켜주는 기능 이라고 생각하면 쉽다.
이 소스를 어떻게 해당 경로로 설정하지? 라고 생각하기 보다는 이 경로로 해당 소스를 보내야지라고 생각하는 것이 헷갈리지 않을 것이다.

실습 #2

match란? <Route path = '/sub/:pm' component = {Dpp} />
- 주소창에서 /sub/'데이터값'으로 전송해줬을 경우, 해당 pm이라는 변수명으로 데이터를 받아온다.
- 매개변수를 {match}로 받아 {match.params.pm}으로 접근 가능.
location이란? <Route exact path = '/epp' component = {Epp} />
- 주소창에서 /sub/?name='홍길동'&age='20'으로 전송해줬을 경우, 각 변수명으로 데이터를 받아온다.
- 매개 변수를 {location}으로 받아 {location.search}로 받아올 수 있으나..
- 그전에 파싱작업을 해주어야 한다. import Qs from 'query-string'으로 import를 시켜준 후 const n = Qs.parse(location.search)로 파싱을 시켜주면 n에 객체가 들어가게 된다.
- 해당 n 객체를 통해 {n.name}, {n.age}로 각각 받아온다.
두개 다 사용하고 싶어요…
- 함수형 컴포넌트의 매개변수로 값을 받아올 때 {match, location}처럼 콤마를 이용하여 둘다 받아오면 된다.
- 주소창에는 http://localhost:3000/fpp/tiger?name=gildong&age=25라고 적어주고 내부에는 위와 같은 코드로 파싱해준다면 끝!

import React, { Component } from 'react';
import { BrowserRouter, Route, Link } from 'react-router-dom'
import Qs from 'query-string'

class Root extends Component {
  render() {
    return (
      <div>
        <BrowserRouter>
        <App/>
        </BrowserRouter> 
        {/* 이제부터 App는 라우터 장비입니다. */}
      </div>
    );
  }
}

const App = () => {
  return (
    <div> 
      {/* 사용자가 주소뒤에 'path' 내용을 적어주면 해당 컴포넌트를 끌어와줌. */}
      {/*! Route와 path사이에 'exact'를 붙이면 해당 주소가 정확히 맞을때에만 component를 가져온다. => 붙이지 않으면 '/tiger' 입력시 '/' 입력한 것도 함께 끌어와 버림 */}
      <Route exact path = '/' component = {Bpp} />
      <Route path = '/tiger' component = {Cpp} />  
      {/* :을 사용(ex-/sub/tiger) => match 객체로 값을 받을 수 있다. */}
      <Route path = '/sub/:pm' component = {Dpp} />
      {/* 주소창 뒤에 '?name=홍길동'을 적어주면 location을 통해 받아 name이라는 변수로 홍길동이라는 값을 받아온다.*/}
      <Route exact path = '/epp' component = {Epp} />
      <Route exact path = '/fpp/:pm' component = {Fpp} />
      <h1>App</h1>
    </div>
  );
};

const Bpp = () => {
  return (
    <div>
      <h1>Bpp</h1>
    </div>
  );
};

const Cpp = () => {
  return (
    <div>
      <h1>Cpp</h1>
    </div>
  );
};

const Dpp = ({match}) => {
  // 1. match 객체로 값을 받아온다.
  console.log(match);
  // 2. match안의 params 안에 저장된다. 해당 변수이름으로 접근.
  console.log(match.params.pm);

  return (
    <div>
      <h1>Dpp</h1>
      <h1>{match.params.pm}</h1>
    </div>
  );
};

const Epp = ({location}) => {
  // 1. location 객체로 값을 받아온다.
  console.log(location);

  // 2. location 안의 search 안에 저장된다. 하지만 변수명도 함께 적혀있음..
  console.log(location.search);

  // 3. 해당 값을 파싱하여 각 변수명에 저장한다.
  const n = Qs.parse(location.search)

  // 4. n이라는 객체내에 분리되어 저장됨.
  console.log(n);

  // 5. n에서 각 변수로 접근 가능.
  console.log(n.name);

  return (
    <div>
      <h1>{n.name}</h1>
      <h1>{n.age}</h1>
      <h1>Epp</h1>
    </div>
  );
};

// match와 location 모두 사용할 경우에 두개 다 받도록 match와 location사이에 콤마 사용
const Fpp = ({match, location}) => {

  console.log(match);

  // location 파싱 작업
  const n = Qs.parse(location.search)

  return (
    <div>
      <h1>{match.params.pm}</h1>
      <h1>{n.name}</h1>
      <h1>{n.age}</h1>
      <h1>Fpp</h1>
    </div>
  );
};

export default Root;

실습 #3

Link란?
- 해당 경로로 보내주는 기능이다. <a>태그와 동일.
- 일반적으로 해당 페이지로 이동시켜주는 기능도 있지만, 데이터 값을 쏴주면서 이동시켜주는 기능도 가능하다. (예시는 아래 소스에)

App Component

(…)

// Link를 import에 추가 해 준다.
import { BrowserRouter, Route, Link } from 'react-router-dom'

{/* Link를 사용하면 해당 주소를 써준다고 생각하면 됨 */}
<Link to = '/fpp'>Link1</Link>
{/* 해당 Link2를 클릭 시 실제로 타이핑으로 값을 보내주는 것과 동일하게 처리가 된다. */}
<Link to = '/fpp/tiger?name=홍길동&age=30'>Link2</Link>

실습 #4

backtick이란?
- `을 말한다.
backtick을 사용하는 방식
- Link를 통해 파라미터 데이터를 보내주는데 해당 데이터를 동적으로 보내줘야 할때 사용한다.
- 각 변수를 정의하고, <Link to = >안에 {`/fpp/${a}?name=${b}&age=${c}`} 와 같은 방식으로 각 변수들을 넣어준다.
- 각 변수는 ${'변수명'}의 타입으로 설정 가능

App Component

(…)

const App = () => {
  const a = 'tiger'
  const b = 'cat'
  const c = 25

  return (
    <div> 
      {/* 위와 아래 Link가 동일한 의미를 가짐 */}
      <Link to = '/fpp/tiger?name=gildong&age=25'>Fpp 데이터전송</Link><br/>

      {/* 동적으로 값을 설정해 주기 위한 백틱 문법 */}
      <Link to = {`/fpp/${a}?name=${b}&age=${c}`}>백틱</Link><br/>
      <h1>App</h1>
    </div>
  );
};

‘Get’ 방식과 ‘Post’ 방식의 차이점

막간으로 나온 강사님의 질문이다.
기본적인 차이점이야 있지만 제일 요점인 차이점은 데이터를 받을때는 ‘Get’, 데이터를 보내줄때는 ‘Post’방식을 이용하는 것 이다.

React 정리 #6

실습 #1

실습 #2

실습 #3

App Component

실습 #4

App Component

‘Get’ 방식과 ‘Post’ 방식의 차이점

Share this post