React(10)
-
[React] 구조분해할당
import React, { useState } from "react"; import { Link, useNavigate } from "react-router-dom"; import ASIDE_1ST from "./ASIDE_1ST"; import ASIDE_2ND from "./ASIDE_2ND"; import "./SignUp.scss"; function SignUp() { const [alert, setAlert] = useState(false); const navigate = useNavigate(); const [userInfo, setUserInfo] = useState({ last_name: "", first_name: "", birthday: "", phone_number: "", emai..
2022.10.21 -
[React] 함수로 hover 기능 구현
import React, { useState } from 'react'; import './App.css'; function App() { const [alert, setAlert] = useState(false); return ( setIsShown(true)} onMouseLeave={() => setIsShown(false)}> Hover over me! {alert && ( I'll appear when you hover over the button. )} ); } export default App; export default Login; { alert && } 위에 내용은 useState(false)의 값을 주면 alert이 false이기 때문에 && 는 둘중하나만 거짓이여도 반환하지 않기 때문..
2022.10.20 -
[React] Router Link navigate 사용 방법
⚡️Router 설치 사용 방법 터미널에 들어가서 npm install react-router-dom@6 설치한뒤 Router.js 파일을 생성하고 path = "경로" element = {경로접근시 렌더링할컴포넌트} import React from "react"; import Login from "./pages/Login/Login"; import Main from "./pages/Main/Main"; import { BrowserRouter, Routes, Route } from "react-router-dom"; const Router = () => { return ( ); }; export default Router; 4. index.js 파일에 Router를 연결 import React from..
2022.10.09 -
[React] map() 사용방법 & 버튼 추가 삭제 방법
⚡️댓글 삭제 버튼 const Main = () => { let [comment, setComment] = useState(""); let [btn, setBtn] = useState([]); // 댓글 삭제 버튼 만들기 result ( {btn.map((item, index) => ( yYy_Ds {item} { let copy = [...btn]; copy.splice(index, 1) setBtn(copy) }}>삭제 ) map((item, index) => ( )은 map()은 인자를 두개 까지 사용 할 수 있다 item은 button이라는 변수에서 값을 가져오고 index는 key 값이 별도로 없을 경우 index로 key값을 지정해준다 삭제버튼을 만들 경우 index를 사용하여 삭제하고 싶은 ..
2022.10.07