react+vue
-
[react] 라우팅하기...2react+vue 2022. 10. 5. 19:07
react에서 a태그를 사용할 수 있었다. 단 라우팅을 통해 주소에 컴포넌트를 배정해 준 후 그 주소를 a태그에 걸 수 있다. 라우팅 App.js import './App.css'; import Footer from './components/footer'; import Header from './components/header'; import HomePage from './pages/homePage'; import { Route,Routes } from 'react-router-dom'; import Login from './pages/login'; function App() { return ( ); } export default App; “/login”이라는 주소에 Login 컴포넌트를 지정해 주었다...
-
[react] 라우팅하기react+vue 2022. 10. 4. 18:42
react router dom 설치 npm i react-router-dom 라우팅 하기 index.js root.render( ); 을 로 감싸준다 여기서 'BrowserRouter' is not defined라는 에러를 만났는데 이는 import를 시켜주지 않아서 생긴 에러다. import BrowserRouter from 'react-router-dom'; 이렇게 import시켜주면 된다. 주소 “/”에 HomePage컴포넌트를 지정해주자 App.js import './App.css'; import Footer from './components/footer'; import Header from './components/header'; import HomePage from './pages/homePa..
-
[react] props (2)react+vue 2022. 9. 24. 20:40
데이터 여러개 전달하기 import { useEffect, useState } from "react"; import Footer from "../components/footer"; import Header from "../components/header"; import Home from "../components/home"; function HomePage() { const [boards, setBoards] = useState([]); useEffect(() => { //board다운로드 let datas = [ { id: 1, name: "길동", content: "가나다" }, { id: 2, name: "꺽정", content: "마바사" } ]; setBoards([...boards,...dat..
-
[react] props (1)react+vue 2022. 9. 23. 16:47
컴포넌트와 페이지 만들기 컴포넌트들을 모아둘 components폴더와 페이지들을 모아둘 pages폴더를 만든다. components에는 header.js와 footer.js를 만들어준다. header.js import styled from 'styled-components'; const HeaderStyle= styled.div` background-color: blue; font-size: 2rem; margin: 0 auto; text-align: center; `; function Header() { return ( header입니다. ); } export default Header; footer.js import styled from "styled-components"; const FooterSt..
-
[react] useEffect가 두 번 실행되는 현상react+vue 2022. 9. 23. 15:52
react Strict모드 때문인데 next.config.js가 있다면 그 안에 reactStrictMode를 false로 수정하면 된다 나 같은 경우에는 없었는데 찾아보니 index.js에서 설정을 변경할 수 있었다. index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); // If you want to s..
-
[react] styled-componentsreact+vue 2022. 9. 23. 14:36
기존 스타일 적용 방법 function App() { const a = { backgroundColor: "red" }; return ( 안녕 ); } 단점 : 자동완성이 안된다. 주의 사항: style을 만들때는 함수안에 만들지 말것. 정적 코드이기 때문에 UI가 reload될 때마다 읽어지는 것을 방지한다. css파일 만들기 src폴더 우클릭→새파일→.css App.css .box-style{ background-color: pink; } App.js import './App.css'; function App() { const a = { backgroundColor: "red" }; return ( 안녕 css파일로 적용 ); } export default App; styled-components 다..
-
[react] useRefreact+vue 2022. 9. 22. 14:56
태그의 속성을 동적으로 변경할 수 있는 방법 div태그 배경색 동적으로 변경하기 function App() { const myRef = useRef(null); return ( { myRef.current.style.backgroundColor = "red" }}> 박스 ); } export default App; 태그 속성 ref에 정의한 useRef를 지정해준다. button을 클릭하면 useRef의 current속성의 style.backgroundColor에 색을 지정해 준다. 리스트로 뿌려준 값 속성 동적으로 변경하기 먼저 배열을 만들고 배열의 값을 뿌려준다 function App() { const myRef = useRef(null); const [list, setList] = useState(..
-
[react] useMemoreact+vue 2022. 9. 22. 14:54
문제 상황 상태변수 감지로 인해 호출하지 않아도 될 함수까지 호출해버리는 현상 function App() { const [list, setList] = useState([1, 2, 3, 4]); const [str, setStr] = useState("합계"); const getAddResult=()=>{ let sum = 0; list.forEach(i => sum = sum + i); console.log("sum", sum); console.log("getAddResult 실행됨"); return sum; } return setStr("안녕")}>문자 변경 { setList([...list,10]); }}>리스트값 추가 {list.map(i => ({ i}))} { str}:{getAddResult..