react+vue
-
[react] 스프링부트 프로젝트 연동하기2: 글쓰기react+vue 2022. 10. 13. 16:06
java Conroller @CrossOrigin @RequestMapping(value = "/book",method = RequestMethod.POST) public ResponseEntity book(@RequestBody Book book){ return new ResponseEntity(bookService.saveBook(book),HttpStatus.CREATED); } react view import React, { useState } from 'react'; import { Form,Button } from "react-bootstrap"; import { useNavigate } from 'react-router-dom'; const SaveForm = () => { const nav..
-
[react] 스프링부트 프로젝트 연동react+vue 2022. 10. 13. 15:13
준비 스프링부트 프로젝트를 이클립스나 sts로 만든다. 스프링부트 : 2.7.4 버전 메이븐: 4.0.0 버전 jpa tymeleaf lombok mariaDB VScode에서 react 프로젝트를 만든다. bootstrap react-bootstrap react-dom react-router-dom react-redux redux java서버에서 react로 데이터 불러오기 id와 title, author가 있는 book이 있고 db에 book데이터가 저장되어있다. 그 book데이터를 react 화면에 띄워보자 java Book.java package com.yujin.react.vo; import javax.persistence.Entity; import javax.persistence.Generat..
-
[react] Reduxreact+vue 2022. 10. 11. 16:59
설치 npm install react-redux yarn add redux react-redux 숫자 증가시키기 예제 Redux를 사용하지 않을 경우 두 개의 컴포넌트에서 각각 하나는 숫자를 보여주고, 나머지 하나는 숫자를 증가시키는 역할을 한다. App.js에서 두개의 컴포넌트에 각각의 변수와 함수를 넘겨준다. App.js import Bottom from "./components/Bottom"; import Top from "./components/Top"; import React, { useState } from "react"; import "./App.css"; function App() { const [number, setNumber] = useState(1); const addNumber = ..
-
[react] Fluxreact+vue 2022. 10. 11. 16:58
Flux 자기 스스로는 반응하지 않으면서 다른 물질의 반응을 촉진시켜 주는 촉매와 같은 역할을 한다. 지속적인 흐르면서 요청에 의해 다른 물질의 반응을 촉진한다. 흐름 요청이 들어오면 dispatcher에서 해당하는 store를 찾아서 던져준다. 사실 dispatcher는 store를 식별하여 요청을 던져주지 않고 모든 store에 요청을 던진다. store가 자신에 맞는 요청을 선별하여 받아 처리한다. 예를 들어 A라는 store는 A요청을 구독한다. dispatcher는 모든 요청을 모든 store에 던진다. A는 B,C,D 요청을 받으면 처리하지 않지만, A요청을 받으면 처리한다. 그러면 A store를 구독한 모든 화면들이 처리된 결과로 변경된다.
-
[react] computed property namesreact+vue 2022. 10. 11. 13:58
computed property names 동적으로 객체의 키값을 할당한다. 게시판 예제 초기 데이터 const [posts, setPosts] = useState([ { id: 1, title: "제목1",content:"내용1" }, { id: 2, title: "제목2" ,content:"내용2"}, { id: 3, title: "제목3",content:"내용3" }, { id: 4, title: "제목4",content:"내용4" }, { id: 5, title: "제목5",content:"내용5" } ]); return ( 리스트 페이지 { posts.map((post) => { return ( 번호:{post.id} 제목:{post.title} 내용:{post.content} 삭제 ); }) ..
-
[react] 라우팅하기...4: useNavigate()react+vue 2022. 10. 5. 19:10
페이지를 이동시킬 때 useNavigate()를 사용할 수 있다. 사실 페이지 자체를 이동시키는 것은 아니고 주소를 지정한 라우터를 찾아간다는 표현이 맞을 듯 싶다. 예를 들어 navigate(”/”)를 호출하면 주소창에서 “/”를 쳐서 이동하는 것과 달리 를 찾아가서 지정된 element를 보여주는 것에 가깝다. react는 원페이지 웹이므로 Route를 사용하는 것을 권장한다. 뒤로 가기 import React from "react"; import { useParams,useNavigate } from "react-router-dom"; function Login(props) { console.log(useParams()); const { id } = useParams(); console.log(id..
-
[react] 라우팅하기...3: useParams()react+vue 2022. 10. 5. 19:09
java의 @PathVariable처럼 주소에 정보를 담아 그 값을 가져올 수 있다. 방법은 라우터에서 미리 param을 선언해 주고 그 주소의 결과페이지에서 사용하면 된다. App.js import './App.css'; import Footer from './components/footer'; import Header from './components/header'; import HomePage from './pages/homePage'; import { Route,Routes } from 'react-router-dom'; import Login from './pages/login'; function App() { return ( ); } export default App; Route태그의 path..