React와 Flask를 사용하여 간단하고 사용하기 쉬운 웹 애플리케이션을 구축하는 방법

React와 Flask를 사용하여 간단하고 사용하기 쉬운 웹 애플리케이션을 구축하는 방법

소개:
인터넷이 발전하면서 웹 애플리케이션의 요구 사항이 점점 더 다양해지고 복잡해지고 있습니다. 사용 편의성과 성능에 대한 사용자 요구 사항을 충족하기 위해 최신 기술 스택을 사용하여 네트워크 애플리케이션을 구축하는 것이 점점 더 중요해지고 있습니다. React와 Flask는 프런트엔드 및 백엔드 개발을 위한 매우 인기 있는 프레임워크이며, 함께 잘 작동하여 간단하고 사용하기 쉬운 웹 애플리케이션을 구축합니다. 이 글에서는 React와 Flask를 사용하여 간단하고 사용하기 쉬운 웹 애플리케이션을 구축하는 방법을 자세히 소개하고 구체적인 코드 예제를 제공합니다.

1. React 소개:
React는 사용자 인터페이스 구축을 위한 Facebook의 오픈 소스 JavaScript 라이브러리입니다. 구성요소화 개념을 채택하여 개발자가 페이지를 독립적인 구성요소로 나눌 수 있으며, 각 구성요소는 자체 상태와 동작을 독립적으로 관리할 수 있습니다. 이 디자인은 개발을 더욱 모듈화하고 유지 관리하기 쉽게 만듭니다.

2. Flask 소개:
Flask는 Python으로 작성된 경량 웹 애플리케이션 프레임워크입니다. Werkzeug 및 Jinja2 라이브러리를 기반으로 개발되었으며 사용하기 쉽고 유연성이 뛰어납니다. Flask는 웹 애플리케이션을 빠르게 구축할 수 있는 기능을 제공하며 다른 라이브러리 및 프레임워크와 함께 쉽게 사용할 수 있습니다.

3. React 프런트엔드 구축:

1. React 프로젝트 생성:
   먼저 Create React App 도구를 사용하여 React 프로젝트를 생성해야 합니다. 명령줄을 열고 다음 명령을 실행합니다.

npx create-react-app my-app

이 명령은 현재 디렉터리에 my-app이라는 React 프로젝트를 생성합니다.

2. React 구성 요소 작성:
   src 디렉터리에 App.js라는 파일을 만들고 다음 코드를 편집합니다.

import React, { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);
  
  const handleIncrement = () => {
    setCount(prevCount => prevCount + 1);
  };
  
  const handleDecrement = () => {
    setCount(prevCount => prevCount - 1);
  };
  
  return (
    <div>
      <h1>计数器</h1>
      <p>当前计数：{count}</p>
      <button onClick={handleIncrement}>增加</button>
      <button onClick={handleDecrement}>减少</button>
    </div>
  );
}

export default App;

이 간단한 카운터 구성 요소에는 현재 개수를 표시하는 텍스트가 포함되어 있으며 클릭 버튼 두 개를 사용할 수 있습니다. 개수를 늘리거나 줄이는 데 사용됩니다. 구성 요소는 내부적으로 React의 useState 후크를 사용하여 계산 상태를 관리합니다.

3. React 구성 요소 렌더링:
   src 디렉터리의 index.js 파일에서 원래 코드를 다음 코드로 바꿉니다.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

이 코드의 기능은 App 구성 요소를 ID가 있는 DOM 요소에 렌더링하는 것입니다. 루트의.

4. Flask 백엔드 구축:

1. Flask 설치:
   명령줄에서 다음 명령을 실행하여 Flask 라이브러리를 설치합니다.

pip install flask

2. Flask 애플리케이션 만들기:
   app.py라는 파일을 만들고 편집합니다. it 다음 코드:

from flask import Flask, jsonify

app = Flask(__name__)

@app.route('/api/counter', methods=['GET'])
def get_counter():
    counter = 0
    return jsonify(counter)

if __name__ == '__main__':
    app.run(debug=True)

이 코드는 app이라는 Flask 애플리케이션을 생성하고 get_counter라는 경로를 정의하여 GET 요청을 처리하고 카운터의 초기 값을 반환합니다.

3. Flask 애플리케이션 실행:
   Flask 애플리케이션을 실행하려면 명령줄에서 다음 명령을 실행하세요.

python app.py

이 명령은 기본적으로 포트 5000에서 수신 대기하는 로컬 서버를 시작합니다.

5. 프런트엔드 및 백엔드 연결:

1. GET 요청 보내기 및 데이터 가져오기:
   App.js 파일에서 다음과 같이 handlerIncrement 및 handlerDecrement 함수를 편집합니다.

...
const handleIncrement = () => {
  fetch('/api/counter')
    .then(response => response.json())
    .then(data => setCount(data));
};

const handleDecrement = () => {
  fetch('/api/counter')
    .then(response => response.json())
    .then(data => setCount(data));
};
...

fetch API가 사용됩니다. 여기에서 GET 요청을 보낸 다음 콜백에서 함수의 카운트 값을 설정합니다.

2. POST 요청 보내기 및 데이터 업데이트:
   App.js 파일에서 다음과 같이 handlerIncrement 및 handlerDecrement 함수를 편집합니다.

...
const handleIncrement = () => {
  fetch('/api/counter', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ count: count + 1 }),
  })
    .then(response => response.json())
    .then(data => setCount(data));
};

const handleDecrement = () => {
  fetch('/api/counter', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ count: count - 1 }),
  })
    .then(response => response.json())
    .then(data => setCount(data));
};
...

여기에서는 fetch API를 사용하여 POST 요청을 보내고 카운트 값을 가져옵니다. 요청 본문. 그런 다음 콜백 함수에서 업데이트된 개수 값을 설정합니다.

6. 요약:
이 글에서는 React와 Flask를 사용하여 간단하고 사용하기 쉬운 웹 애플리케이션을 구축하는 방법을 자세히 소개합니다. 프론트엔드 페이지의 구성요소화 및 상태 관리는 React를 통해 수행할 수 있으며, Flask는 백엔드 인터페이스의 구성 및 데이터 관리를 제공합니다. 프런트엔드와 백엔드 간의 연결을 통해 데이터 상호작용과 페이지 업데이트가 가능합니다. 위의 코드 예제는 실제 필요에 따라 확장 및 수정할 수 있는 간단한 카운터 애플리케이션입니다. 이 글이 React와 Flask를 사용하여 웹 애플리케이션을 구축하려는 개발자에게 도움이 되기를 바랍니다.

위 내용은 React와 Flask를 사용하여 간단하고 사용하기 쉬운 웹 애플리케이션을 구축하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!