Web dev/React
-
React / 아코디언 메뉴 만들기Web dev/React 2022. 3. 30. 18:22
리엑트로 퍼블리싱중 사이드바를 구현하면서 아코디언을 구현해봤다. 제이쿼리를 쓰면 편하겠지만 제이쿼리를 안쓰려고 노력중이다. 처음엔 tab을 만들어본적이 있어서 useState를 사용해 구현해보려햇는데 젠장 다같이 동작해서 망했다 그렇다고 각메뉴에 useState를 사용하면 오히려 더 지저분해질것 같아서 그냥 구현해보았다. w3school를 참조했다. 1. for문을 돌려 각 리스트에 번호를 메긴뒤 그것이 클릭되면 이벤트를 주었다. 제이쿼리에 길들여져 그냥 구현하라 했으면 못했을것같다. 코린이는 웁니다... 여기서 문제는 예제는 this로 셀렉을 하던데 나는 이상하게 못가져오는것이다.. 자바스크립트 this는 어려워.. e.target으로 하니까 잘가져온다. useEffect로 로드 되었을때 한번 동작시켜..
-
React / window.location 이용해 특정페이지 header에 클래스 부여하기Web dev/React 2022. 3. 30. 17:49
리엑트로 퍼블리싱중에 header를 투명하게 디자인했다. 근데 만들다 보니 서브페이지에서는 바탕이 흰색이라 보이지가 않았다... 평소같았으면 서브헤더를 하나 더 만들었을텐데 리엑트는 SPA로 라우팅설정이 되어 있어 헤더를 두개 만들면 안될것 같아서 URL에 따라 클래스를 부여해줬다. 1. window.loaction 으로 URL을 가져와 조건문으로 클래스를 부여해줬다. 하지만 상품 디테일페이지라 파라미터를 받아 데이터를 뿌려주기 때문에 고민하다가 정규표현식으로 파라미터 숫자를 없애버렸다 ㅋㅋ 클래스네임을 가져올때는 module.css라서 저렇게 넣어줘야 css를 불러온다. 클래스네임을 가져올때 배열로 가져오기 때문에 지정해주거나 .item()으로 한번더 셀렉을 해줘야 된다 useEffect(() =>{ ..
-
React / loginCheck customHook 만들기Web dev/React 2022. 3. 27. 00:04
포트폴리오 만드는중..오랜 사투끝에 로그인로그아웃 기능을 만들었다...하지만 세션을 리펙토링 해야한다.. 그냥 세션스토리지에 저장했기 때문에..세션을 제대로 적용한것도 아니다.. 갈길이 머니 일단 넘어가야지 ㅋㅋ.. 로그인,로그아웃을 만드니 로그인 여부에 따라 UI를 다르게 해줘야 한다. 로그인체크를 반복하다보니 custom hook으로 만들어 관리해보았다. hook을 만들땐 앞에 use를 붙혀줘야 된다고들 한다. useLoginCheck.js import React, { useEffect, useState } from 'react' export default function useLoginCheck() { const [isLogin, setIsLogin] = useState(false) useEffec..
-
React / JavaScript module.css 클래스 부여하기Web dev/React 2022. 3. 25. 13:50
리엑트에서 스크롤 다운을 하면 헤더에 변화를 주려 클래스를 부여하는데 잘 동작하지 않았다. 클래스는 module.css. 에서 불러오고 있어서 불러오면 변수로 넣어주니 잘 동작했다. import React from 'react'; import HeaderNav from './HeaderNav'; import HeaderTop from './HeaderTop'; import header from '../../assets/css/common/header.module.css'; export default function Header() { const scrollDown = () =>{ const scrollTop = document.documentElement.scrollTop; const headerWrap..
-
React / tab 쉽고 간단하게 만들기Web dev/React 2022. 3. 20. 14:10
상품 상세페이지를 만드는중에 탭메뉴를 구현해야 했다. 구글링 하다보면 탭메뉴 예제는 많이 있었다. 이 코드가 제일 짧고 가독성이 좋다 import React, { useState } from 'react' import tab from '../../assets/css/sub/product.module.css'; import styled from "@emotion/styled"; import ReviewSlide from '../main/ReviewSlide'; const Tabs = styled.div` display: flex; justify-content: center; `; const Tab = styled.button` width:100%; height: 40px; box-sizing: border..
-
React / useState 로 count 만들기Web dev/React 2022. 3. 20. 13:31
상품상세 페이지 만드는 도중 수량체크하는걸 만들어보았다. useState 사용예제로 흔한 카운트버튼을 만들어 보았다. 이제 장바구니 찜하기 구매하기까지 공부해 봐야겠다. 수량체크여서 0이 되지 않게끔 조건을 걸어주었다. import React, { useState } from 'react'; import detail from '../assets/css/sub/product.module.css'; export default function ItemDetailPage() { const [number, setNumber] = useState(1); const increase = () => { setNumber(number + 1); } const decrease = () => { if(number > 1 ){..
-
React / useParams Hook으로 파라미터 받아 데이터 뿌려주기Web dev/React 2022. 3. 18. 21:52
상품리스트 페이지를 구현하려고 한다. 카테고리별로 뿌려주는 데이터가 다르기 때문에 URL의 파라미터를 받아 뿌려줘야 했다. 자바스크립트 경우 location.search 로 url값을 받아와 정규표현식으로 다듬어 사용해야해서 코드가 길어지고 정규표현식때문에 어려웠당. 하지만 React는 react-router-dom의 useParams Hook으로 간편하게 값을 받아올 수 있었다. 1. 라우터 설정해주기 // app.js 2. 링크에 파라미터 전달해주기 나는 헤더에서 제품을 누르면 인덱스로 전체보기를 하려고 all이라고 붙혀주었다. //HeaderTop.jsx 제품 3.useParams로 값 받아오기 //SubItemList.jsx // 라우트설정에 :category로 해줬으니 변수명도 같은걸로 설정해줘..
-
React 아이템리스트 카테고리 분류하기 map() filter()Web dev/React 2022. 3. 17. 22:53
이전에 aixos 로 데이터를 받아와 아이템리스트를 만드는데 성공했다. 아이템을 클릭하면 파라미터를 받아 상세페이지로 이동하거나 카테고리별로 아이템리스트를 필터하려고 한다. 필터함수로 카테고리를 분류해보았다. category 를 0,1,2 이런식으로 분류하려다 그냥 스트링으로 해보았다. 카테고리가 베스트인 아이템만 골라 뿌려줬다. import React, { useEffect, useState } from 'react' import { Swiper, SwiperSlide } from "swiper/react"; import axios from "axios"; import { Pagination } from "swiper"; import css from '../../assets/css/main/mainsl..