[Vue, React] 뷰와 리액트의 간단한 비교 예제 (v-if, v-for)

1. v-if

2. v-for

3. 숫자 증가

4. html 요소 하나에 여러 이벤트 걸 때

 

 

 

- Vue와 React 비교

 

 

- JSP와 Vue와 React 비교

 

 

 

 

- Vue와 React의 화면, 로직 작성

 

 

---

 

1. v-if

 

// vue3

<template>
  <div>
    <p v-if="isLogin">로그인 상태</p>
    <p v-else>로그아웃 상태</p>
  </div>
</template>

<script setup>
import { ref } from "vue"

const isLogin = ref(true)
</script>

 

Vue3는 템플릿 문법으로 조건 처리

 

 

 

// React

function App() {
  const isLogin = true;

  return (
    <div>
      {isLogin ? <p>로그인 상태</p> : <p>로그아웃 상태</p>}
    </div>
  );
}

 

React에서는 JSX 안에서 JavaScript 조건식을 사용한다.

 

 

 

---

 

 

2. v-for

 

// vue3

<template>
  <ul>
    <li v-for="item in list" :key="item">
      {{ item }}
    </li>
  </ul>
</template>

<script setup>
const list = ["사과", "바나나", "포도"]
</script>

 

핵심 : v-for="item in list"

 

 

 

// React

function App() {
  const list = ["사과", "바나나", "포도"];

  return (
    <ul>
      {list.map(item => (
        <li key={item}>{item}</li>
      ))}
    </ul>
  );
}

 

핵심 : array.map()

 

 

 

---

 

 

3. 숫자 증가 

 

// vue

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increase">증가</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const count = ref(0)

function increase(){
  count.value++
}
</script>

 

 

 

 

 

// React

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  function increase() {
    setCount(count + 1);
  }

  return (
    <div>
      <p>{count}</p>
      <button onClick={increase}>증가</button>
    </div>
  );
}

export default Counter;

 

 

 

 

---

 

4. 여러 이벤트를 동일 HTML 요소에 걸 때

 

 

// vue

<button
  @click="save"
  @click="log"
  @click="update"
>
저장
</button>

 

또는

<button @click="save(); log(); update();">
저장
</button>

 

뷰는 이벤트를 여러 개 선언할 수 있다.

html 작성하고 스크립트에 함수를 쓴다.

 

 

 

// React

 

import { useState } from "react";

function App() {

  function save() {
    console.log("save 실행");
  }

  function log() {
    console.log("log 기록");
  }

  function update() {
    console.log("update 처리");
  }

  function handleClick() {
    save();
    log();
    update();
  }

  return (
    <div>
      <h1>React 버튼 예제</h1>
      <button onClick={handleClick}>
        저장
      </button>
    </div>
  );
}

export default App;

 

리액트는 핸들러 안에서 여러 함수를 호출한다.

 

React에서는 화면을 함수로 만들고

이벤트에서 사용할 함수를 작성하고 ( save(), log(), update(), handleClick() )

handleClick() 안에서 여러 이벤트를 호출한다.

그리고 return 안에서 JSX 로 화면을 작성한다.

 

 

---

 

 

{list.map(item => (
  <div key={item}>
    {item === "사과" && <p>사과입니다</p>}
  </div>
))}

 

&&
map
{}

전부 JavaScript 문법이다.