React19 [React] + express + mariadb /post insert 하기 inputComp.js 추가할 input 값 App.js 로 넘겨주기 import '../css/InputComp.css'; import { Component } from 'react'; class InputComp extends Component{ constructor(props){ super(props) this.state={ id:'', todo:'' } } addTodoList=()=>{ alert('추가(InputComp)') // const {id} = this.props+1 const {id} = this.props.id+1 // alert('추가할 id ' + this.props+1) alert('추가할 id ' + id) const{todo} = this.state this.props.a.. 2023. 7. 8. [React] + express + mariadb 데이터베이스 화면 띄우기 todo list 원래 App.js 상태값에 데이트베이스 대신 배열로 대신하여 화면에 띄웠었는데 이제 express 와 mariadb 를 연결하여 데이터베이스 내용을 화면에 띄울거다. 먼저 app.js 에 있던 배열을 지워준다. class App extends Component{ constructor(props){ super(props) this.state={ todolist:[] } } 이제 서버와 db 세팅을 해야한다. src 폴더밑에 server폴더를 만들어주고 server.js 파일을 생성해준다. const express = require('express'); const db = require('./config/db'); const bodyParser = require('body-parser') .. 2023. 7. 2. [React] 슬라이드(React Slick) 사용 npx create-react-app react-slide-ex npm install react-slick npm install slick-carousel components 폴더에 MySlider.js 생성, css폴더에 MySlider.css, images 폴더 생성하기 MySlider.js 에 슬릭 라이브러리 임포트 해주고 사진도 불러오기 import '../css/MySlider.css'; import Slider from 'react-slick'; import 'slick-carousel/slick/slick.css'; import 'slick-carousel/slick/slick-theme.css'; import img1 from '../images/slide-images1.jfif' func.. 2023. 6. 24. [React Hook] axios / api 받아오기 리액트 훅으로 api 받아오기 npx create-react-app react-hook-axios useEffect 임포트 해주기 import './App.css'; import {useEffect} from 'react'; function App() { //리액트 오리지날 - componentDidMount 기능 useEffect( () => { },[]) //[name], ... //useEffect - componentDidMount, componentDidUpdate, componentWillUnm ... return ( 화면 ); } export default App; axios 써주기 import './App.css'; import {useEffect} from 'react'; function.. 2023. 6. 18. [React] React hook CRUD npm install express npm install mysql npm install react-router-dom npm install axios (XMLHttpRequest -> $.ajax -> axios) npm install query-string queryString.parse() 프로젝트 React - Express -MySQL React : 화면 만들고, 서버에 요청(axios), 응답받고 Express : React에서 보낸 요청을 받아들여서 인자, 쿼리스트링, 바디를 읽음 , 읽고 꺼내고 가공(요청된 정보를 가공)함/ 이 연결된 데이터베이스에 CRUD MySQL : DB구축 -------------------------------------------------------------.. 2023. 6. 18. [React hook] 리액트 훅으로 카운터 만들기 React 2013 - 클래스형 컴포넌트, 함수형 컴포넌트 React hook 2018 -함수형 컴포넌트 -useState, useEffect, useRef hook - 갈고리 ------------------------------------------------------------------------------ 기존의 클래스형으로 만들었던 카운터 기능을 리액트 훅으로(함수형으로) 만들어보기 npx create-react-app react-hook-counter Counter1 은 클래스형 import { Component } from "react"; class Counter1 extends Component{ constructor(props){ super(props) this.state={ num:.. 2023. 6. 17. [React] 검색창 만들기 / api 서버로 데이터 받아와서 검색기능 프론트엔드 4 : 서버에서 DB접근해서 가져와서 화면뿌리기(풀스택) express 어떻게 받고 응답하는지 서버 동작원리 ,req.params, req.body, req.query -------------------------------------- npx create-react-app react-search-practice 라우터 다운로드 npm install react-router-dom App.js 클래스형으로 만들어주기, components 폴더생성 후 SearchInput.js, Home.js, SearchResult.js 파일생성 SearchInput은 상태값을 저장해야하기 때문에 클래스형으로 만들어주기 import '../css/SearchInput.css'; import { Component.. 2023. 6. 17. [React] 라우터를 이용한 로케이션 객체 Tab, Travel, Life 상태값 따로 없으니 함수형으로 만들어주기 import '../css/Tab.css'; function Tab(){ const moveLife=()=>{ window.location.href='/life' } const moveTravel=()=>{ window.location.href='/travel' } return( 라이프 트래블 ) } export default Tab; import '../css/Life.css'; function Life(){ return( 라이프 ) } export default Life; import '../css/Life.css'; function Travel(){ return( 트래블 ) } export default Travel; App에.. 2023. 6. 17. [React] Router 버튼클릭시 주소이동 버튼 만들어주고 클릭 이벤트 걸어주기 App.js import { Component } from 'react'; import './App.css'; import {BrowserRouter, Routes, Route} from 'react-router-dom'; import Home from './components/Home.js'; import Profile from './components/Profile.js'; class App extends Component{ constructor(props){ super(props) this.state ={ } } moveHome=()=>{ window.location.href='/' //로케이션 객체 } moveProfile=()=>{ window.locatio.. 2023. 6. 11. 이전 1 2 3 다음 728x90
