[ React, Python ] FastApi Cors 설정하고 React 에서 ReCoil 사용 및 Api Call 해보기

1. FastApi Cors 설정

■ Main.py Cors 에 필요한 라이브러리 임포트하기

from fastapi.middleware.cors import CORSMiddleware

 

■ origin 배열에 url 추가하기

#cors url
origins = [
    CORSMiddleware,
    "http://localhost",
    "http://localhost:5173",
]

 

■ Cors Config setting 하기

#cors settings
app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

 

■ 총 코드

import uvicorn
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

# 컨트롤 라우터 선언
from branch_crime_app import branch_crime_router

#cors url
origins = [
    CORSMiddleware,
    "http://localhost",
    "http://localhost:5173",
]


app = FastAPI()
app.include_router(branch_crime_router.router)

#cors settings
app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)


@app.get('/')
def home():
    return {'app' : 'main'}

if __name__ == "__main__":
    uvicorn.run("main:app", host='0.0.0.0', port=8892, reload=True)

---

2.  React 에서 Recoil 로 상태저장 및 Api Call 해보기

- Recoil : Redux 와 동일하게 상태를 저장하기 위한 라이브러리

■ 리액트 프로젝트에서 Axios 설치하기

#리액트 프로젝트 폴더에서 진행

npm install axios@latest

 

■ 리액트 프로젝트에서 recoil 설치하기

npm install recoil

 

■ 상태저장을 위한 recoil 사용 ts 선언

- atom : 값을 읽는 컴포넌트들은 암묵적으로 atom을 구독한다. 그래서 atom에 어떤 변화가 있으면 그 atom을 구독하는 모든 컴포넌트가 재 렌더링 되는 결과가 발생한다.

 

- selector : 파생된 상태(derived state)의 일부를 나타낸다. 파생된 상태는 상태의 변화다. 파생된 상태를 어떤 방법으로든 주어진 상태를 수정하는 순수 함수에 전달된 상태의 결과물로 생각할 수 있다.

#CrimeBranchAtoms.ts

import axios from "axios";
import { atom, selector } from "recoil";

# Atom은 상태(state)의 일부를 나타낸다. 
export const crimebranchState = atom<object>({
    key : "crime_branch",
    default : [],
})

# 비동기적으로 데이터를 가져오는 역할
export const fetchCrimeBranchState = selector({
    key : "fetch_crime_branch",
    get : async () => {
        const ack = await axios.get(
            "http://localhost:8892/crime_branch"
        );

        const data = ack.data

        return data;
    }
})

 

 

■ 사전 정의 recoil 을 사용하여 데이터 가져오기

- useRecoilValueLoadable 을 사용하여 비동기적으로 데이터를 가져온다

- useRecoilValueLoadable 안에 사전정의한 selector를 넣어준다.

 

import styled from "styled-components"
import { useRecoilValueLoadable } from "recoil"
import { fetchCrimeBranchState } from "../../../state/Atoms/CrimeBranchAtoms"
import SingDataBox from "../../../components/SingleDataBox";

const Container = styled.div`
    padding : 1%;
`

export type BindingDataType = {
    name: string;
    data: unknown
}

export default function TotalCrimeReport() {

    const data = useRecoilValueLoadable(fetchCrimeBranchState);

    if (data.state != "hasValue") {
        return;
    }

    return (
        <Container>
            {
                Object.entries(data.contents.average).map((el, index) => (
                    <SingDataBox key={index} data={el[1]} name={el[0]}/> 
                ))
            }
        </Container>
    )
}

 

■ console.log 로 데이터 확인하기