Web dev/React
-
React axios swiper 데이터뿌리기Web dev/React 2022. 3. 16. 12:21
앞서 React 와 express 를 연결시킨 뒤 axios로 api 데이터를 받아와 콘솔로 찍어보았다. 그리고 받아온 데이터를 swiper 로 렌더링 시켜보았다. 1. useEffect 로 로드되었을때 데이터를 받아와 useState 값에 넣어준다. const [item, setItem] = useState([]); useEffect(() => { const callApi = async () => { await axios.get("/api") .then((res) => { setItem(res.data.product) }); }; callApi(); }, []); setItem 에 데이터를 넣어준뒤 item에 데이터가 잘들어갔나 콘솔을 찍었는데 자꾸 안들어 가서 한참 버벅였다.. 콘솔도 찍어보고 ret..
-
React / react , express 연결하기Web dev/React 2022. 3. 15. 11:09
아직 프론트엔드에 익숙하지 않다.. React , express 를 둘다 실행하고 데이터를 불러오는 것을 공부해봤다. 1. 작업할 디렉토리를 생성하고 프론트에서 쓸 리엑트를 생성해준다. $ mkdir my-app $ cd my-app $ npx create-react-app client client 에서 리엑트 실행해서 잘켜지나 확인 $ cd client $ npm run start 2 다시 루트로 와서 express를 설치해준다. Express > node.js 프레임워크 nodemon > 코드 수정시 서버를 껐다켰다 안해도 되는 모듈 cocurrently > 리엑트, 익스프레스 스타트 명령어를 동시에 시켜줄 모듈 npm install express nodemon concurrently 3. clien..
-
React / react-router-dom v5 와 v6 라우팅 설정Web dev/React 2022. 3. 3. 20:19
react-router-dom v6로 2021년 11월쯤 바뀐 것 같다. 버전 업데이트가 되면서 약간씩 변화가 생겼다. v6로 connetedrouter 를 사용했었는데 아직 호환이 안되는듯 싶어 v5로 다운그레이드하여 했다. v5 다운 그레이드 npm i react-router-dom@5.2.0 1. 라우팅 설정 switch 와 routes , component 와 element v5 방식 import { BrowserRouter, Route, Switch } from "react-router-dom"; import Home from "./pages/Home"; import Write from "./pages/Write"; function App() { return ( } /> } /> Page Not..
-
React / useRef로 checkbox trigger 하기Web dev/React 2022. 3. 2. 11:18
포트폴리오 제작중이다. 디자인도 직접했다 .. 옷도 잘 못입는데 디자인은 더어렵다.. 지금은 로그인/로그아웃 기능을 만들고 있는데 망할 리덕스사가가 동작을 안한다 ㅠㅠ 빨리 취업하고싶다..ㅠㅠ 늦은 나이 무슨 부귀영화를 누리겠다고 직업을 바꾸려할까.. 무튼 aisde 의 gnb에서 메뉴를 누르면 해당 섹션으로 스크롤값이 변하며 이동하려 한다. useRef 훅 쓰는법도 간단했다. 하지만 나에게 온시련은 gnb메뉴를 클릭하여 해당 섹션으로 가고 aside도 잘 닫히는데 저 햄버거놈이 가만히 있는것이다.. 그래서 생각한게 저걸 트리거해보자! 트리거란 저 햄버거놈을 클릭하지 않았지만 클릭한 효과를 주는것이다. 사이드바가 움직이는 원리는 css클래스를 하나 만들어 줬다뺐다 하는것이다. 제이쿼리에서는 addClas..
-
React / useState Hook으로 toggle 하기Web dev/React 2022. 3. 2. 10:55
햄버거 메뉴의 aside를 구현하기 위해 토글기능이 필요했다. 리엑트의 useState 훅을 사용하면 쉽게 구현할 수 있다. 1. useState를 import 해준다. 2. useState를 선언해준다. 3. click 이벤트에 넣어준다. useState초기 상태값은 false로 해준다 아직 클릭이 안되었기 때문이다. import React, { useState,useRef } from 'react'; import { Link } from 'react-router-dom'; export default function Aside() { const [showAside, setShowAside] = useState(false); const hamburgerBtn = useRef(null); const han..