리액트게시판 썸네일형 리스트형 [react.js]게시판 만들기2: 읽고 쓰기 목록, 읽기, 쓰기 모두 axios를 통해 읽을 예정이다. 간편한 예제를 위해 css는 모두 styled-components 를 사용했다. 방법이 헷갈리는 분들은 맨아래 소개 되어 있는 이전 챕터를 활용하면 될것 같다. /frontend/src/routes/List.js import React, { Component } from 'react'; import { Link } from 'react-router-dom'; import axios from 'axios'; import styled from 'styled-components'; class List extends Component { state = { boards: [], }; handleChange = (e) => { const { name, va.. 더보기 [react.js]axios 외부 데이터 연동하기 Axios 사용방법 설치 yarn add axios 예제 아주 간단한 예제를 만들어보자 src/App.js import React, { Component } from 'react'; import axios from 'axios'; class App extends Component { state = { data: [], }; //함수 handleChange = (e) => { const { name, value } = e.target; this.setState({ [name]: value, }); }; //로딩 //예제로 쓸 데이터 loadingData = async () => { try { const response = await axios.get( 'https://jsonplaceholder.typic.. 더보기 [react.js]게시판 만들기1 우선 Backend게시판이 완성되어 있다는 전제하에 포스팅한다. 뭐 사실 프론트 구현만 할 생각이면 이것만 따라해도 무방. (다만 Backend 구성을 안한다면 데이터 연동부분 제대로 알기 어려울것) /frontend/package.json //이렇게 설치했음 *** "axios": "^0.19.1", "node-sass": "^4.13.0", "react": "^16.12.0", "react-dom": "^16.12.0", "react-router-dom": "^5.1.2", "react-scripts": "3.3.0", "styled-components": "^4.4.1" *** router 환경셋팅 yarn add react-router-dom /frontend/src/index.js import .. 더보기 이전 1 다음
