react에서 axios 속도 높이기

Question

안녕하세요 현재 자체적으로 프론트는 React를, 백은 DRF를 써서 홈페이지를 제작 중이며메인페이지에 무한스크롤링으로 포스트를 받아오는 흔한 SNS 페이지 형식으로 만들고 있습니다. axios를 사용해 포스트(20개, 각 2문장 정도의 텍스트와 100KB 사진)를 받아오는데 시간이 좀 걸려서 (3~4초) 질문 몇가지 문의드립니다. 1. 제가 코드를 너무 비효율적으로 작성한것인지2. axios 속도를 높일 수 있는 다른 방법이 있는지 MainPage.jsimport React, {Component} from 'react'import {connect, Provider} from 'react-redux'import { bindActionCreators } from 'redux'; import store from '../../store' import ReactDOM from 'react-dom'import axios from 'axios' import { Dimmer, Loader, Image, Segment } from 'semantic-ui-react'import '../../../node_modules/semantic-ui-css/semantic.min.css'import './MainPage.css' import * as AlarmContentActions from '../../store/modules/AlarmContent'import * as isLoadingActions from '../../store/modules/isLoading' import AnswerPostMulti from './AnswerPostMulti'import PageHeader from './PageHeader'import DropdownBar from './DropdownBar' class MainPage extends Component { constructor(props) { super(props) } state = { AnswerPostMultiList : [ ] } componentDidMount() { axios.get("http://127.0.0.1:8000/api/main") .then(res => { this.setState({ AnswerPostMultiList: res.data }) } ) .catch(err => { console.log(err) }) window.addEventListener("scroll", this.handleScroll); } componentWillUnmount() { window.removeEventListener("scroll", this.handleScroll); } handleScroll = () => { if (document.body.scrollHeight - (window.innerHeight + window.scrollY) <= 1000 && this.state.num != 0 &&!this.props.isLoading["isLoading"]) { this.props.onIsLoading() console.log('Bottom!') axios.get("http://127.0.0.1:8000/api/main") .then(res => { this.setState({ AnswerPostMultiList: this.state.AnswerPostMultiList.concat(res.data) }) this.props.onIsLoading() } ) .catch(err => { console.log(err) }) } }; render() { return( <>

{ this.state.AnswerPostMultiList.map((answerpost,index) => { return }) }

) }} MainPage.defaultProps = { } const mapDispatchToProps = (dispatch) => ({ onIsLoading: () => { dispatch(isLoadingActions.isLoading()) } }) const mapStateToProps = state => ({ isLoading: state.isLoading }) export default connect(mapStateToProps, mapDispatchToProps)(MainPage)

바람종 · Answer

axios 사용은 간단한 편이기 때문에 코드에 큰 문제는 보이지 않습니다.크롬에서 F12로 개발자 모드를 키시면Elements Console Sources ... 등 여러 메뉴가 나오는데거기서 Network를 클릭하시고 F5를 누르시면해당 페이지의 리스폰 정보가 나옵니다.거기서 api/main의 정보에서 Time이나 Waterfall 데이터로 API 호출 속도를 확인하시고충분히 빠르다면 데이터 받는 부분이 아닌 다른 부분에서 느린게 아닌가 의심해보시는게 좋을 것 같습니다ex) 그리는 부분, 조건이 만족되어 axios를 호출하는 부분

react에서 axios 속도 높이기

1개의 답변

Q&A 목록