23.03.15

학습내용

1. async/await
2. SinglePage, Router
3. Nesting
4. Query String, Path Variable

async/await

• client에서 비동기로 작업을 진행하다 server로 부터 필요한 값을 받은 뒤 작업을 진행해야하는 경우가 존재한다.
• React는 server에 요청을 보낸뒤 response에 상관없이 작업을 진행하기에(비동기 방식) await을 통해 server로 부터 값을 가져올때까지 기다린 뒤 실행 할 수 있다.

{/* fetch를 통한 실행 방식 */}
const fetchPost = async()=>{
    console.log("App의 fetchPost");

    const response = await fetch("http://localhost:8080/Spring15/user/getUser",{
      method : 'post',
      headers : {
        "Content-Type" : "application/json"
      },
      body : JSON.stringify({
        userId:'user01',
        name:'홍길동',
        age:200
      })
    });
    const data = await response.json();
  }

{/* axios를 통한 실행 방식 */}
const axiosGet = async ()=>{
    console.log("App의 axiosGet()");

    axios.get("http://localhost:8080/Spring15/user/getUser?name=홍길동&age=11")
      .then((response)=>{
        console.log(response);
      })
  }  

{/* jQuery를 통한 실행 방식 */}
const jQueryGet = async ()=> {
    $.ajax(
      {
        url:"http://localhost:8080/Spring15/user/getUser?name=홍길동&age=11",
        method:"GET",
        dataType:"text",
        success : function(serverData, status) {
          var JSONData = $.parseJSON(serverData);
          console.log(JSONData);
        }
      }
    )
  }

SPA(Single Page Application), Router

• 단일 페이지로 Application을 구성하는것을 말한다.

• 단일페이지로 Application을 구성하다보니 하나의 페이지 안에서 원하는 component로 Navigate하는 과정이 필요한데 이때 사용하는 기술이 Router이다.

• 는 와 다르게 browser가 server에 재요청하는것이 아닌 내부적으로 component를 와서 ReRendering한다.

• 를 통해 URL이 path 조건을 충족하면 해당 component를 불러온다. exact{true} attribute를 추가하지 않는다면

  다른 path조건에 자신의 URL이 조금이라도 일치한다면 해당 component를 불러온다.

• 를 통해 모든 path를 충족하지 않았을때 지정된 componenet를 불러오게 할 수 있다.

function App() {

  console.log("App");

  return (
    <div className="ViewGood">
      
      <h1>01 React Router Dom</h1>
      <h3>a Tag 사용 페이지 전환</h3>

      <a href="/">Component01</a>&nbsp;
      <a href="/component02">Component02</a>&nbsp;
      <a href="/component03">Component03</a>&nbsp;

      <br/>
      <h3>Link component 사용 페이지 전환</h3>
      <Link to="/">Component01</Link>&nbsp;
      <Link to="/component02">Component02</Link>&nbsp;
      <Link to="/component03">Component03</Link>&nbsp;

      {/* <Route path="/" exact={false}><Component01/></Route>
      <Route path="/component02"><Component02/></Route>
      <Route path="/component03"><Component03/></Route> */}

      <Switch>
        <Route path="/" exact={true}><Component01/></Route>
        <Route path="/component02"><Component02/></Route>
        <Route path="/component03"><Component03/></Route>
        <Route path="*"><NotFound/></Route>
      </Switch>
    </div>
  );
}

Nesting

• 하나의 component안에서 모든 Route를 관리하는것은 유지보수에 좋지 못하다.
• Main Page안에서 각 도메인별 Route를 관리할 component를 설정한 뒤 해당 component에서 세부적인 Route를 설정해줄 수 있다.

{/* 도메인 영역별로 세부 URL을 처리할 component로 보내기 */}
function App() {

  console.log("App");

  return (
    
    <div className="ViewGood">
      
      <CommonTop/>

      <Switch>
        <Route path="/" exact={true}><Main/></Route>
        <Route path="/user" ><User/></Route>
        <Route path="/product" ><Product/></Route>
        <Route path="*" ><NotFound/></Route>
      </Switch>
    </div>
  );
}

{/* Product 도메인 안 세부적인 URL을 처리 할 component */}
const Product = () => {
  console.log("Product");

  let{path, url} = useRouteMatch();
  console.log(path);
  console.log(url);

  return (
    <div className='ViewGood'>
      <Link to="/product/product01">Product01</Link> &nbsp;&nbsp;
      <Link to={url+"/product02"}>Product02</Link> &nbsp;&nbsp;
      <Link to={url+"/product03"}>Product03</Link> &nbsp;&nbsp;

      <Switch>
        <Route path={path+"/product01"}><Product01/></Route>
        <Route path="/product/product02"><Product02/></Route>
        <Route path={path+"/product03"}><Product03/></Route>
        <Route path={path+"/*"}><NotFound/></Route>
      </Switch>
    </div>
  );
};

Query String, Path Variable

• Client에서 Server로 Query String, Path Variable을 통해 data를 보낼 수 있는것처럼 Client 내부에서도 Query String, Path Variable을 통해 data를 보낼 수 있다.

const Purchase = () => {
  console.log("Purchase");

  let{path, url} = useRouteMatch();
  console.log(path);
  console.log(url);

  return (
    <div className='ViewGood'>
      <Link to="/purchase/purchase01/TV/1000">purchase01</Link> &nbsp;&nbsp;
      <Link to={url+"/purchase02"}>purchase02</Link> &nbsp;&nbsp;
      <Link to="/Purchase/Purchase03?purchaseName=TV&price=1000">purchase03</Link>

      <Switch>
        {/* Path Variable은 아래와 같이 data를 전달 할 수 있다.*/}
        <Route path="/Purchase/Purchase01/:purchaseName/:price"><Purchase01/></Route>
        <Route path="/purchase/purchase02"><Purchase02/></Route>
        <Route path={path+"/purchase03"}><Purchase03/></Route>
        <Route path={path+"/*"}><NotFound/></Route>
      </Switch>
    </div>
  );
};

• PathVariable은 react router dom의 useParam() fucntion을 통해 data를 받을 수 있다.

const Purchase01 = () => {

  console.log("Purchase01")

  let{purchaseName, price} = useParams();
  console.log(purchaseName, price);

  let params = useParams();
  console.log(params);

  return (

    <div className="ViewGood">
    
      <h2>Purchase01</h2>    
       Product01...
      <br/><br/>
      구매상품 : {purchaseName}
      <br/>
      구매상품 : {params.purchaseName}

      <br/><br/>
      구매가격 : {price}
      <br/>
      구매가격 : {params.price}
    </div>
  );
};

• Query String은 key가 search인 json object로 전달되며 useLocation() function을 통해 data를 받아 온 뒤 URLSearchParams() function을 통해 json object에서 data를 꺼낼 수 있다.

const Purchase03 = () => {

  console.log("Purchase03")

  const {search} = useLocation();
  console.log(search);

  const abc = new URLSearchParams(search);
  console.log(abc.get("purchaseName"));
  console.log(abc.get("price"));
  
  return (

    <div className="ViewGood">
    
      <h2>Purchase03</h2>    
      Purchase03...
      <br/><br/>
      구매상품:{abc.get("purchaseName")};
      <br/><br/>
      구매가격:{abc.get("price")};
    </div>
  );
};