리액트훅3 [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. 이전 1 다음 728x90
