svelte와 마찬가지로 shadcn을 적용했음으로 똑같이 나오려면 해당 준비까지 하시고 따라하시면 좋습니다.

tauri도 적용되어있으니 앱이나 데스크탑으로도 실행해보세요.

      
        
src/lib.App.tsx

import { useState } from 'react';
import { Button } from './components/ui/button';
import { Input } from './components/ui/input';
import { Label } from './components/ui/label';

function App() {
  const [id, setId] = useState('');
  const [password, setPassword] = useState('');
  const [passwordCheck, setPasswordCheck] = useState('');

  async function signupRequest(e: React.MouseEvent<HTMLButtonElement>) {
    e.preventDefault();
    try {
      const response = await fetch('http://localhost:8000/api/signup', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          id: id,
          password: password,
        }),
      });

      if (response.ok) {
        const data = await response.json();
        alert(`${data.status_code} ${data.content}`);
      } else {
        const errorData = await response.json();
        alert(`${errorData.status_code} ${errorData.content}`);
      }
    } catch (error) {
      console.error('Error:', error);
      alert(`오류가 발생했습니다: ${error instanceof Error ? error.message : String(error)}`);
    }
  }

  return (
    <main className="flex flex-col items-center justify-center min-h-screen bg-gray-50">
      <div className="bg-white p-6 rounded-lg shadow-md w-full max-w-md">
        <h1 className="text-2xl font-bold mb-4 text-center">회원가입</h1>
        <form onSubmit={(e) => e.preventDefault()}>
          <Label htmlFor="id" className="block text-gray-700">아이디</Label>
          <Input 
            id="id" 
            value={id} 
            onChange={(e) => setId(e.target.value)} 
            className="w-full mb-4" 
          />
          
          <Label htmlFor="password" className="block text-gray-700">패스워드</Label>
          <Input 
            type="password" 
            id="password" 
            value={password} 
            onChange={(e) => setPassword(e.target.value)} 
            className="w-full mb-4" 
          />
          
          <Label htmlFor="passwordCheck" className="block text-gray-700">패스워드 확인</Label>
          <Input 
            type="password" 
            id="passwordCheck" 
            value={passwordCheck} 
            onChange={(e) => setPasswordCheck(e.target.value)} 
            className="w-full mb-6" 
          />
          
          <Button 
            type="button"
            onClick={signupRequest} 
            className="w-full bg-indigo-500 text-white hover:bg-indigo-600"
          >
            회원가입
          </Button>
        </form>
      </div>
    </main>
  );
}

export default App;
  
      
    

한국에서는 React, JavaSpringboot가 압도적인 점유율을 가지고있습니다.

개인적으로 fastapi기반의 pynest와 svelte를 이용한 tauri만 하고싶음에도

React와 JavaSpringboot를 추천드리는건 먼저 기능적인 부분들이 업데이트되고

이슈들의 처리가 이루어지기 떄문에 알수있으면 아는것을 추천드립니다.

배움등에는 정답은 없으니직접 비교해보고 도움이 되는것들을 얻어갔으면 합니다.

    
      
import { useState } from 'react';

const [id, setId] = useState('');
const [password, setPassword] = useState('');
const [passwordCheck, setPasswordCheck] = useState('');
      
    
  

React에서 지원하는 useState를 사용하도록 선언합니다.

혹시나 실수로 변수에 재할당을 방지하기 위해 const로 선언하여 각 변수들을 초기화해줍니다.

React에서는 svelte의 store와 비슷한 useState를 사용합니다.

[변수(읽기 전용), set변수함수] = useState를 이용한 상태의 초기값

useState는 배열을 반환하며 첫번째 요소는 상태값, 두번째 요소는 상태값을 변경하는 함수입니다.

useState는 상태값을 변경할때마다 컴포넌트를 다시 렌더링합니다.

useState는 함수형 컴포넌트에서만 사용할 수 있습니다.

    
      
return (
  <main className="flex flex-col items-center justify-center min-h-screen bg-gray-50">
    <div className="bg-white p-6 rounded-lg shadow-md w-full max-w-md">
      <h1 className="text-2xl font-bold mb-4 text-center">회원가입</h1>
      <form onSubmit={(e) => e.preventDefault()}>
        <Label htmlFor="id" className="block text-gray-700">아이디</Label>
        <Input 
          id="id" 
          value={id} 
          onChange={(e) => setId(e.target.value)} 
          className="w-full mb-4" 
        />
        
        <Label htmlFor="password" className="block text-gray-700">패스워드</Label>
        <Input 
          type="password" 
          id="password" 
          value={password} 
          onChange={(e) => setPassword(e.target.value)} 
          className="w-full mb-4" 
        />
        
        <Label htmlFor="passwordCheck" className="block text-gray-700">패스워드 확인</Label>
        <Input 
          type="password" 
          id="passwordCheck" 
          value={passwordCheck} 
          onChange={(e) => setPasswordCheck(e.target.value)} 
          className="w-full mb-6" 
        />
        
        <Button 
          type="button"
          onClick={signupRequest} 
          className="w-full bg-indigo-500 text-white hover:bg-indigo-600"
        >
          회원가입
        </Button>
      </form>
    </div>
  </main>
);
      
    
  

React는 JSX문법을 사용하여 HTML과 자바스크립트를 함께 사용할 수 있습니다.

현재는 기본적인코드만 작성했음으로 스벨트와 큰차이는 나지 않을겁니다.

class 대신에 className

for 대신에 htmlFor

on:click 대신에 onClick

bind:value 대신에 value와 onChange

on:submit 대신에 onSubmit

등등의 차이점이 있습니다.

이런식으로 스벨트와 리액트의 기본적인 문법 차이를 알고

둘다 사용할 수 있으면 좋습니다.

    
      
function App() {
export default App;


async function signupRequest(e: React.MouseEvent<HTMLButtonElement>) {
  e.preventDefault();
  try {
    const response = await fetch('http://localhost:8000/api/signup', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        id: id,
        password: password,
      }),
    });

    if (response.ok) {
      const data = await response.json();
      alert(`${data.status_code} ${data.content}`);
    } else {
      const errorData = await response.json();
      alert(`${errorData.status_code} ${errorData.content}`);
    }
  } catch (error) {
    console.error('Error:', error);
    alert(`오류가 발생했습니다: ${error instanceof Error ? error.message : String(error)}`);
  }
}
      
    
  

스벨트의 script html구문과 다르게

리액트의 함수형 컴포넌트는 함수를 반환하며 JSX문법을 사용합니다.

svete와 똑같은 signupRequest함수를 작성함에 있어서도

useState를 사용함으로 $없이 변수를 쓸수있고

React.MouseEvent<HTMLButtonElement>를 사용하여 이벤트를 처리합니다.

React에서는 이벤트를 처리할때 e.preventDefault()를 사용하여

기본동작을 막을 수 있습니다.

그 외 부분은 스벨트와 큰 차이가 없습니다.

javascript를 공부한다면 많은 부분을 공통적으로 사용가능하며 도움이 될겁니다.