본문 바로가기

react5

리액트 자식 대 부모 컴포넌트 통신 컴포넌트간 데이터 전달 실행 Form 에서 받은 데이터를 App.js 과 통신 App.js import React from 'react'; import Expenses from './components/Expenses/Expenses'; import NewExpense from './components/NewExpense/NewExpense'; const App = () => { const addExpenseHandler = expense=>{ console.log("in app.js") console.log(expense) } return ( ); } export default App; NewExpense 컴포넌트를 import 하여 실행 addExpenseHandler 를 통해 자식 컴포넌트의 데이터.. 2022. 12. 8.
리액트 Fetch API 와 axios 를 통해 서버와 통신하기 Fetch API 와 axios 를 통해 서버와 통신하기 참고사이트 fetch const loadContent= () =>{ const url = 'api/todolist' const options={ method:"GET" } fetch(url,options) .then((resp)=>{ return resp.json() }) .then( data => { console.log(JSON.stringify(data)) setListContent(data) }) } axios 구형브라우저 지원 요청 중단 가능 응답 시간 초과 설정 가능 CSRF 보호 기능 내장 JSON 데이터 자동변환 Node.js 에서 사용 npm install axios // api/todoinsert : 서버 url const han.. 2022. 6. 16.
리액트 Movie API를 활용한 영화 목록 사이트 react-router-dom 을 5버전대로 다운그레이드 npm install axios react-router-dom@5.2.0 bootstrap-bootstrap Link to 적용을 위해 index.js 에서 를 주석 처리 // // 네비게이션 Navigation.js import {Container, Nav, Navbar} from "react-bootstrap" import React from 'react'; const Navigation = () => { return ( Home MovieList About ); }; export default Navigation; Home MovieList About href 에 따라 링크 이동 Home.js import { useEffect, useStat.. 2022. 6. 7.
리액트 to-do-list 흐름 파악 App.js import { Component } from "react"; import Form from "./components/Form"; import TodoItemList from "./components/TodoItemList"; import TodoListTemplate from "./components/TodoListTemplate"; class App extends Component { id = 4; // 초기 데이터 정보 state = { input: '', todos: [ { id: 0, text: '할일1', checked: false }, { id: 1, text: '할일2', checked: true }, { id: 2, text: '할일3', checked: false }, { .. 2022. 6. 5.
리액트 프로젝트 생성 시작 노드 설치 https://nodejs.org/ko/download/ 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org * 노드 설치 오류 노드 설치 중에 오류가 생겼었는데 관리자 권한 설치고 문제 해결 설치 확인 node -v Visual Code 리액트 개발 툴로는 Visual Code가 좋다. https://code.visualstudio.com/download Download Visual Studio Code - Mac, Linux, Windows Visual Studio Code is free and available on your favorite platform - Li.. 2022. 6. 4.

티스토리툴바