AC 03/12 Vue, React

Bae Seong Jun·2024년 3월 12일

Acorn academy

목록 보기
52/70

라우팅

특정 링크에 컴포넌트를 연결시키는 것

설치

Vue 프로젝트 내에서 라우터 install
npm install vue-router@3

작성

App.vue에서 탬플릿 작성

<template>
  <div>
    <h1>app에서 라우팅연습</h1>
    <router-link to="/">Home</router-link><br>
    <router-link to="/login">login</router-link><br>
    <router-view></router-view>
    <!-- 링크의 컴포넌트가 보여질 부분 -->
  </div>
</template>

<script>
// 컴포넌트 import 없음
// 모든 라우팅 주소는 router 설치 후
// router.js 생성 후 주소를 router.js파일에 등록함, router를 main.js에 최종등록
export default {
  name: 'App',
  components: {
  }

}
</script>

router.js 작성

import Vue from 'vue';
import VueRouter from 'vue-router';
/////////
import Bar from './components/Bar.vue'; 
import Foo from './components/Foo';
import NotFound from './components/NotFound';

const routes= [
    // 주소등록
    // name은 나중에 쓰임
    // 지금은 적어만 놓음
    { path : "/", component: Bar, name:"Bar"},
    { path : "/login", component: Foo, name:"Foo"},
    { path : "/**", component: NotFound, name:"NotFound"}

];

// 실제 사용할 라우터 export
const router = new VueRouter({ routes }); //VueRouter를 주소 등록 후 생성
Vue.use(VueRouter); // VueRouter 사용 등록
export default router; // main.js에서 라우터를 컴포넌트로 등록,
// 실제 사용할 라우터 export

path: "/**"는 나머지 페이지에 대한 처리

main.js

import Vue from 'vue'
import App from './App.vue'
import router from "./router" ////router.js 임포트

Vue.config.productionTip = false

new Vue({
  router, //////////// 라우터 등록
  render: h => h(App),
}).$mount('#app')

props로 데이터 전송, 라우팅하는 방법

라우팅을 통해 컴포넌트로 절달되는 데이터는 props:{}로 받을 수 있다.
또한 props없이 $route.params.id 단독으로도 받을 수 있다.

전달하는 key값과 받는 key값이 동일해야한다.

props로 데이터 전달
{ path : "/login/:id", component: Foo, name:"Foo", props: true},
{ path : "/knu", component: Knu, name:"Knu", props: {userid: "홍길동"} },
동적, 정적 방식으로 데이터를 전달할 수 있다.

App.vue

<template>
  <div>
    <h1>app에서 라우팅연습</h1>
    <router-link to="/">Home</router-link><br>
    <router-link to="/login/abcd">login/abcd</router-link><br>
    <router-link to="/my/1234">Baz-pw /my/abcd</router-link><br>
    <router-link to="/knu"> knu {userid:"홍길동"}</router-link><br>
    <router-view></router-view>
    <!-- 링크의 컴포넌트가 보여질 부분 -->
  </div>
</template>

<script>
// 컴포넌트 import 없음
// 모든 라우팅 주소는 router 설치 후
// router.js 생성 후 주소를 router.js파일에 등록함, router를 main.js에 최종등록
export default {
  name: 'App',
  components: {
  }
}
</script>

router.js

import Vue from 'vue';
import VueRouter from 'vue-router';
/////////
import Bar from './components/Bar'; 
import Foo from './components/Foo';
import Baz from './components/Baz';
import Knu from './components/Knu';
import NotFound from './components/NotFound';

const routes= [
    // 주소등록
    // name은 뷰컴포넌트의 name을 이용해 라우팅 하는 방법에 쓰인다.
    // 지금은 적어만 놓음
    { path : "/", component: Bar, name:"Bar"},
    { path : "/login/:id", component: Foo, name:"Foo", props: true},
    { path : "/my/:pw", component: Baz, name:"Baz", props: true},
    { path : "/knu", component: Knu, name:"Knu", props: {userid: "홍길동"} },
    { path : "/**", component: NotFound, name:"NotFound"}

];

// 실제 사용할 라우터 export
const router = new VueRouter({ routes }); //VueRouter를 주소 등록 후 생성
Vue.use(VueRouter); // VueRouter 사용 등록
export default router; // main.js에서 라우터를 컴포넌트로 등록,
// 실제 사용할 라우터 export

Foo.vue

<template>
  <div>
    <h1>Foo</h1>
    props-od:{{ id }}<br>
    $route.params.id={{ $route.params.id }}<br>
  </div>
</template>

<script>
export default {
  props:{
    id:String
  }
}
</script>

쿼리로 데이터 전송 (?deptno=xxx 방식)

Baz.vue
props는 사용이 안되며,
$route.query.username로 받는다.

<template>
    <div>
      <h1>Baz</h1>
      props: {{ username }}<br>
      $route.query.username: {{ $route.query.username }}<br>
      {{ a() }} : {{ value }}
    </div>
  </template>
  
  <script>
  export default {
    name:"Baz",
    props:{
      username:String //props 사용안됨
    }, 
    data: function(){
      return { 
        value:""
      }
    },
    methods:{
      a: function(){
        var test="";
        test = this.$route.query.username;
        console.log(">>>>>", test);
        this.value=test;
        return test;
      }
    }
  }
  </script>

router.vue
props 구문 제거

    //App.vue 링크 수정
    { path : "/my", component: Baz, name:"Baz"},

App.vue
Baz 라우팅 path 수정

    <!-- 동적, 바인딩 -->
    <router-link :to="{path:'/my', query:{username:'홍길동'}}">Baz-pw /my</router-link><br>
    <!-- 정적인 쿼리 -->
    <router-link to="/my?username=홍길동">Baz-pw /my</router-link><br>

주소창에 쿼리방식으로 /path?쿼리 직접 입력해줘도 정상적으로 작동한다.

name을 부여해서 찾아가는 방식

params

App.vue
{name:"라우터에서 정한 라우팅이름"과 params:{key:'value'}} 바인딩
<router-link :to="{name:'Baz', params:{id:'aaa'}}">params:{id:'aaa'}</router-link><br>

router.js
{ path : "/my:id", component: Baz, name:"Baz", props:true},

Baz.vue
$route.params.id
props x

<template>
    <div>
      <h1>Baz</h1>
      props: {{ id }}<br>
      $route.query.username: {{ $route.params.id }}<br>
      {{ a() }} : {{ value }}
    </div>
  </template>
  
  <script>
  export default {
    name:"Baz",
    props:{
      username:String //props 사용안됨
    }, 
    data: function(){
      return { 
        value:""
      }
    },
    methods:{
      a: function(){
        var test="";
        test = this.$route.params.id;
        console.log(">>>>>", test);
        this.value=test;
        return test;
      }
    }
  }
  </script>

라우팅 자식



App.vue
<router-link :to="{name:'Baz', params:{id:'aaa'}}">params:{id:'aaa'}</router-link><br>

Foo.vue

<template>
  <div>
    <h1>Foo</h1>
      <h1>Foo에서 라우팅 연습</h1>
      <router-link to="/fooChild1">Foo Child1</router-link><br>
      <router-link to="/fooChild2">Foo Child2</router-link><br>
      <router-view></router-view>
  </div>
</template>

router.js

    ///////////////////////
    {
        path: "/foo",
        component: Foo,
        name: "Foo",
        children: [
            {path: "/fooChild1", component: FooChild1, name: "FooChild1"},
            {path: "/fooChild2", component: FooChild2, name: "FooChild2"},
        ]
    },
    ////////////////////////
    { path : "/**", component: NotFound, name:"NotFound"},

React 리액트

리액트 가이드 : https://react.vlpt.us/basic/09-multiple-inputs.html

설치 및 환경설정

  1. nodejs, vscode 설치

  2. vscode 확장프로그램 설치

  • reactjs code snippets
  • reactjs Snippets

프로젝트 생성

c: -> react 폴더 생성
cmd

cd c:\react 리액트 폴더 이동
npx create-react-app [프로젝트 파일명]
npx create-react-app react_stu 학생용
npx create-react-app react_prof 교수용

오래 걸림

프로젝트 실행

cmd
cd react_stu 프로젝트 폴더 이동
npm start

vscode
폴더열기->프로젝트 파일 열기
터미널 -> 새터미널
npm start

다시 보기 - 자바스크립트 논리연산자


자바스크립트에서 0, "", null, NaN, undefined는 false, 나머지는 true
===, == 차이

리액트 프로젝트의 구조

node_module -> 라이브러리 저장
App.js -> index.js -> index.html

src백업하는 형태로 프로젝트 재생성


App.js 템플릿

function App(){
  return (<div>
    Template
  </div>);
}

export default App;

컴포넌트

컴포넌트의 이름은 항상 대문자로 시작.

함수형 컴포넌트 (권장) (훅사용 유용)

rsf, rsc로 자동완성 가능

클래스형 컴포넌트

rcc로 자동완성 가능

조건부 랜더링

  //7. null. false, true 값 이용한 조건부 랜더링 반환
  // {null}{false}{true} 반환가능, 하지만 아무것도 랜더링 안됨
  //변수&&<App1 />=> 변수값이 false|null이면 랜더링 안딤
  //                          true이면 <App1 />반환
  // ex) <div>
  //    {count.value>0 && <Title/>}==>count.value>0을 만족해야 <Title/>이 랜더링됨
  // </div
import "./App.css";

function App1(){
  return <p>Hello</p>;
}

function App2(){
  return <App1></App1>
}

function App3(){
  return "Hello World";
}

function App4() {
  return ["A", "B"];
}

function App5(){
  return "{a: 100, b:200}";
}

function App6(){
  return(
    <>
      <p>hello1</p>
      <p>hello2</p>
    </>
  )
}

function App(){
  //7. null. false, true 값 이용한 조건부 랜더링 반환
  // {null}{false}{true} 반환가능, 하지만 아무것도 랜더링 안됨
  //변수&&<App1 />=> 변수값이 false|null이면 랜더링 안딤
  //                          true이면 <App1 />반환
  // ex) <div>
  //    {count.value>0 && <Title/>}==>count.value>0을 만족해야 <Title/>이 랜더링됨
  // </div
  
  return (
    <div>
      <p>Hello6</p>
      0:{null}
      {false}
      {true}
      <br></br>
      1:{null && <App1></App1>}
      <br></br>
      2: {true && <App2/>}
      <br></br>
      3: {false&&<App1></App1>}
      <br></br>
    </div>
  )
}

export default App;

컴포넌트 중첩 - 기본적인 사용법

JSX 소개

https://ko.legacy.reactjs.org/docs/introducing-jsx.html

< 중요 >
JSX에서 자바스크립트 코드 (연산식, 기본데이터타입 데이터, 참조형 데이터)를
사용하려면 {} 중괄호를 무~조건 사용해야한다.
그 외의 것들은 전부 문자열로 인식된다. (html태그 제외)

import React from 'react';

let title = "Menu";
let names = ["홍길동", "이순신", "강감찬"];
let attr = {href:"http://www.google.com", target:"_blank"};

function App1(props) {
  console.log("App1", props);
  return (<a>App1입니다.</a>);
}

export default function App(){
  return (
    <div>
      <h2>jsx 사용1 - 기본</h2>
      숫자는 중괄호로 지정 : {100 + 1}
      <br/><br/>

      불린값(true,false,null)은 직접 출력이 안됨 {3>2}
      <br/><br/>

      불린값을 이용한 문자열 출력 : {3>2 ? "true":"false"}
      <br/><br/>

      3항연산자 : {1 ? "A1" : "B1"}
      <br/><br/>

      <h2>jsx 사용2 - 배열, 반복, 이벤트, 조건부 랜더링</h2>
      문자열 변수 : {title}
      <br/><br/>

      배열: {names}, 원소: {names[0]}
      <br/><br/>

      배열2: {" "}
      {
        [
          <p key={Math.random()}>Hello</p>,
          <p key={Math.random()}>World</p>
        ]
      }
      <br/><br/>
      JSON: {"사용불가"}<br/><br/>
      {/* 중요 */}
      링크: <a {...attr}>구글</a><br/><br/>

      {names.map(
        (row, idx)=>{
          return <span key={Math.random()}>{row} </span>;
        }
      )}
      <br/><br/>
      이벤트 camel 표기법 사용:
      <button onClick= {()=> console.log("OK")} >OK</button>
      <br/><br/>
      스타일 속성 사용:
      <p style={{fontSize: "40px", backgroundColor:"red"}}>스타일</p>
      <br/><br/>
      조건부 랜더링:
      {title === "Menu" && <App1/>}
      <br/><br/>
      <p
        style={{
          fontSize: "40px",
          backgroundColor: title == "Menu" ? "yellow":"red"
        }}>
        test
      </p>
    </div>
  );
}
profile
Bae Seong Jun
코딩 프로?
이전 포스트

AC 03/11

0개의 댓글