[리액트]React 디렉토리 , 파일 구조 알기

리액트 파일구조

일단 내가 알고있는 / 사용하고 있는 구조는 이렇다.

actions/
  user/
    1.jsx
    2.jsx
  friut/
    1.jsx
coommon/
  http.js
components/
  User/
    1.jsx
  Fruit/
    1.jsx
    2.jsx
services/
  user/
    1.js
    2.js
  fruit/
    1.js

 

actions에는 아래처럼 services에서 불러온 함수로 서버과 직접 통신하는 부분이 되겠다.

import UserService from '../services/userservice';

export const RegisterUser = async user => {
    try {
      const res = await UserService.register(user);
      console.log(res);
      return Promise.resolve(res.data.data);
    } catch (err) {
      return Promise.reject(err);
    }
}

export const LoginUser = async user => {
    try {
      console.log(user);
      const res = await UserService.login(user);
      console.log(res);
      return Promise.resolve(res.data.data);
    } catch (err) {
      return Promise.reject(err);
    }
  }

 

그럼, services에는 이렇게 각 http request방식에 따라 정의한다.

import http from '../common/http'

const register = user => http.post(`Customer/`, user);
const login = user => http.post(`Customer/`, user);

const UserService = {
  register,
  login
}

export default UserService

 

commom or api 에는 아래처럼 서버쪽 기본 url을 저장하는 용도로 사용중이다.

혹은 다른 api도 저장해두는 것 같다.

import axios from 'axios'

export default axios.create({
  baseURL: 'http://localhost:5000',
  headers: {
    'Content-type': 'application/json',
  },
})

 

현역 개발자들이 어떻게 쓰는지 알 수가 없어서 또 어떻게 바뀌었을지 모르겠다 ㅠ!