반응형 React8 모달 대신 SweetAlert2 사용해보기 미리보기 사용이유react-modal 라이브러리를 사용해서 모달을 구현한다면 CSS와 컴포넌트도 구현해야 합니다.sweetaler2라이브러리를 사용하면 모달과 비슷한 효과를 내면서 간단하게 구현할수 있기때문에 사용했습니다.참고사이트sweetalert2 홈페이지 SweetAlert2SweetAlert2 - a beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxessweetalert2.github.io사용방법설치npm install sweetalert2importimport Swal from "sweetalert2";유효성 검사 함수 구현반환값으로 성공여부와 유효하지 않은 값을 입.. 2024. 7. 4. 리액트 모달 생성하기 미리보기모달(Modal)사용자 관심을 얻기 위해 사용하는 화면으로 다른 화면 위로 띄워 표현하는 화면이다.모달은 어디에 쓰여질까?모달은 사용자의 이목을 끌 수 있는 다양한 곳에서 사용이 가능하다.예를 들어 사용자가 어떤 동작을 실행 했을때 동작이 제대로 실행되었는지 알려주는 알림 형태,어떤 동작을 실행할 것인지 묻는 확인 형태, 사용자의 입력을 받도록 할 수 있게 하는 입력 형태로 사용이 가능하다.부트 스트랩 모달알림 형태확인 형태입력형태리액트에서 모달 사용하기react-modal 설치리액트에서 모달을 편하게 만들어주는 라이브러리인 react-modal을 설치한다.npm install react-modalindex.html 설정react-modal을 사용하기 위해 index.html에 부모 역할을 하는 .. 2024. 6. 26. 로그인 컴포넌트 기능 구현하기 로그인 컴포넌트 기능 구현미리보기 소스 코드더보기login.jsximport { useState } from "react";import "./Login.css";import { useNavigate } from "react-router-dom";const Login = () => { const nav = useNavigate(); const [formData, setFormData] = useState({ id: "", password: "" }); const onChangeForm = (e) => { const { name, value } = e.target; setFormData({ ...formData, [name]: value }); }; const onSubmitForm =.. 2024. 6. 11. 회원가입 컴포넌트 기능 구현하기 미리보기 회원가입 기능 구현로그인 기능을 구현하기 전에 회원가입 기능을 먼저 구현하겠습니다.소스코드더보기 import { useState } from "react";import "./Signup.css";import { useNavigate } from "react-router-dom";const Signup = () => { const nav = useNavigate(); // 상태 확인 변수 const [formData, setFormData] = useState({ id: "", password: "", password_confirm: "", }); // 이벤트 변화 확인 함수 const onChangeForm = (e) => { const { name, val.. 2024. 6. 11. 로그인, 회원가입 컴포넌트 라우팅 설정 미리보기 react-router-dom 설치아래의 명령어로 react-router-dom 을 설치해주면 됩니다.npm install react-router-domBrowerRouter 추가라우터를 추가할 컴포넌트에 BrowerRouter 컴포넌트로 감싸줍니다.저는 main.jsx 파일안 App 컴포넌트를 BrowserRouter로 감싸줬습니다.import "./index.css";import React from "react";import ReactDOM from "react-dom/client";import App from "./App.jsx";import { BrowserRouter } from "react-router-dom";ReactDOM.createRoot(document.getElementB.. 2024. 6. 8. 회원가입 컴포넌트 생성하기 미리보기아이디, 비밀번호, 비밀번호 확인이 있는 회원가입 화면입니다. 회원가입 컴포넌트 생성회원가입 컴포넌트를 만들기 위해 Signup.jsx파일을 생성해줍니다.스타일을 해줄것이기 때문에 Signup.css파일을 불러와주고 Signup 함수를 생성해줍니다.다른 곳에서 사용할 수 있게 export default로 Signup 함수를 내보내줍니다.Signup 함수의 컴포넌트 내용으로는 폼 태그가 있고 폼의 내용으로 회원가입 헤더 태그와 아이디, 비밀번호, 비밀번호 확인으로 입력가능한 input 태그, 회원가입 및 뒤로가기 버튼 태그가 있습니다.import "./Signup.css";const Signup = () => { return ( 회원가입 .. 2024. 6. 5. 로그인 컴포넌트 생성하기 미리보기로그인 컴포넌트 생성리액트에서 컴포넌트를 생성하려면 함수를 선언하고 반환값으로 html 태그를 반환해야합니다.컴포넌트를 생성하기 전에 먼저 index.css, App.css의 내용과 App.jsx의 App 메서드의 내용을 전부 지워주도록 하겠습니다. 다음으로 src폴더에 components라는 폴더를 생성하고 안에 Login.jsx라는 파일을 하나 생성합니다. 로그인을 하려면 ID, PASSWORD, 로그인 버튼이 필요하므로 form, input, button 태그를 이용하여 화면을 구성합니다.다른 파일에서도 Login 컴포넌트를 불러올 수 있게 Login 함수를 기본 모듈로 설정합니다.const Login = () => { return ( .. 2024. 6. 4. 첫 리액트 프로젝트 생성하기 프론트엔드 개발 툴 설치리액트 프레임워크를 더 편하게 개발할 수 있도록 해주는 도구인 Vite를 설치하겠습니다.Node.js가 설치되어 있다면 아래의 명령어를 명령 프롬프트나 터미널에 입력해서 Vite를 설치해주시면 됩니다.npm install -g vite@latestVite를 이용해 리액트 프로젝트 생성하기첫 번째 리액트 프로젝트를 생성하기 위해서는 명령 프롬프트에 아래와 같은 명령어를 작성해서 프로젝트를 생성해야 합니다.npm create vite@latest명령어를 실행하면 프로젝트의 이름, 프레임워크, 언어를 선택하는 화면이 나옵니다.프로젝트 이름을 first-react-project, 프레임워크는 React, 언어는 JavaScript를 선택하시면 됩니다. 프로젝트 이름, 프레임워크, 언어 선.. 2024. 5. 29. 이전 1 다음 반응형
