티스토리

Stack flows in you

검색하기

블로그 홈

Stack flows in you

sunshineyellow.tistory.com/m

길게 생각하고 짧게 그리기

구독자: 4

방명록 방문하기

주요 글 목록

React : 최근 본 상품 만들기 (localStorage, map, JSON) 조건 useNavigate훅을 사용한 상세보기 페이지("/detail/:id"형태)에 접근하면 해당 상품의 id 번호를 최근 본 상품에 업데이트한다. 여기서 최근 본 상품은 항상 옆에 떠 있는 플로팅 박스이다. 풀이 App.js function App() { let getWatched = localStorage.getItem('watched'); ... useEffect(() => { // 로컬스토리지 'watched'가 존재하지 않을 때만 빈 배열을 생성 if (!getWatched)) { localStorage.setItem('watched', JSON.stringify([])); } }, []); ... return ( ... // getWatched가 존재하면 Watched 컴포넌트를 랜더링 //.. 공감수 0 댓글수 0 2023. 7. 3.
React : 상품을 장바구니에 추가하기 (immer, redux, action, payload) 조건 상세페이지에서 버튼을 누르면 장바구니페이지에 해당 상품이 업데이트된다. 풀이 store.js import { createSlice } from '@reduxjs/toolkit' let cart = createSlice({ name : 'cart', initialState : [ {id : 0, name : 'White and Black', count : 2}, {id : 1, name : 'Red Knit', count : 1} ] , reducers : { ... addCart(state, action){ const newCart = action.payload; return [...state, newCart]; } } }) export let { changeName, changeCount, add.. 공감수 0 댓글수 0 2023. 6. 30.
React : 장바구니 제품 수량변경 (map, redux, action, payload) 조건 map으로 data를 불러온 장바구니 테이블에서 수량변경 버튼을 누르면, array에서 누른 버튼 옆에 있는 상품과 id값이 같은 상품을 찾아서 count값을 1 플러스 연산한다. 풀이 component.js { state.cart.map((a, i)=> { state.cart[i].id } { state.cart[i].name } { state.cart[i].count } { dispatch(changeCount(state.cart[i].id)) }}>➕ ) } store.js let cart = createSlice({ name : 'cart', initialState : [ {id : 0, name : 'White and Black', count : 2}, {id : 2, name : 'Gre.. 공감수 0 댓글수 0 2023. 6. 22.
React : 탭 내용 fade되도록 만들기 (+class에 변수 넣기) 풀이 useEffect를 사용하여 tab 값이 변경될 때마다 fade 값을 업데이트하고, 컴포넌트가 언마운트될 때 fade를 초기화하도록 넣었다. function TabContent({tab}){ let [fade, setFade] = useState('') useEffect(()=>{ setTimeout(()=>{ setFade('end') }, 100) return ()=>{ setFade('') } }, [tab]) return ( {/* */} { [내용0, 내용1, 내용2][tab] } ) } 알게 된 점 cleanup function을 사용해 end를 뗐다가 부착할 수 있도록 하였다. setTimeout을 이용하여 automatic batching 기능을 무효할 수 있도록 하였다. class에.. 공감수 0 댓글수 0 2023. 6. 15.
React : 탭 만들기 (if else, array로 만들기) + props 귀찮을 때 팁 풀이 function Detail(props){ let [tab, setTab] = useState(0); return ( {setTab(0)}}>버튼0 {setTab(1)}}>버튼1 {setTab(2)}}>버튼2 ) } function TabContent(props){ if (props.tab === 0) { return 내용0 } else if (props.tab === 1) { return 내용1 } else if (props.tab === 2) { return 내용2 } } 더 센스있게 풀기 function TabContent({tab}){ return [내용0, 내용1, 내용2][tab] } 알게 된 점 JSX는 JavaScript의 확장 문법이지만, switch 문은 JavaScript의 제어.. 공감수 0 댓글수 0 2023. 6. 12.
React : 더보기 버튼을 누를 때마다 다른 get주소 데이터 불러오기 (+로딩중) 조건 더보기 버튼을 1번과 2번 누를 때 각각 다른 get 주소 상품 데이터를 불러오고, 3번 누르면 더이상 상품이 없다고 표시한다. 풀이 '3번 이상 더보기 버튼을 눌렀을 시 더이상 상품 없음 알림'과 '더보기 버튼 클릭 횟수'를 state로 작성했다. 버튼 클릭 시 클릭 횟수를 1 증가시키는 콜백함수(handleClick)를 작성해 버튼 이벤트핸들러 안에 넣었다. 더보기 버튼 클릭 시 실행될 콜백함수(moreProduct)를 작성했다. - ajax로 상품데이터를 불러오기 전 loading을 실행시켰다. (setLoading(true);) - 클릭 횟수에 따른 url을 변수로 만든 후, if문으로 처리하였다. (3번 이상 클릭 시 '상품 없음 알림' true, '로딩' false, ajax 실행을 중단.. 공감수 2 댓글수 0 2023. 6. 1.
React : ajax 상품 불러오기 전 로딩중 만들기 조건 더보기 버튼을 눌렀을 때 ajax로 상품을 불러오는 중에 로딩중 박스를 띄우고, 상품을 불러온 후에는 안보이게 만들기 풀이 get 전에 로딩중을 불러오고, then 마지막에 풀어주었다. function Main(props){ let [alert, setAlert] = useState(false); let moreProduct = function(){ setAlert(true); axios.get('https://codingapple1.github.io/shop/data2.json') .then((response)=>{ let newProduct = response.data; let copyShoes = [...props.shoes, ...newProduct]; props.setShoes(copySh.. 공감수 0 댓글수 0 2023. 5. 31.
React : 더보기 버튼 누르면 ajax axios로 상품 더 가져오기 조건 더보기 버튼을 누르면 ajax axios로 링크의 상품 데이터(json형태)를 불러온다. 풀이 처음에는 click state를 만들어서 true/false 스위치로 true 시 나올 상품.../false 시 나올 상품.. 하고 삼항연산자로 넣었는데, 그럴 필요가 전혀 없었다. function App() { let [shoes, setShoes] = useState(data); return ( ); } function Main(props){ let moreProduct = function(){ axios.get('https://codingapple1.github.io/shop/data2.json') .then((response)=>{ let newProduct = response.data; let c.. 공감수 0 댓글수 1 2023. 5. 31.
React : 숫자가 아닌 걸 치면 alert 뜨는 input 만들기 조건 input에 숫자가 아닌 문자를 치면 alert를 노출한다. 풀이 function Detail(props){ let [alert, setAlert] = useState(true); let [amount, setAmount] = useState(true); let handleAmount = (e) => { let amount = e.target.value; if(isNaN(amount) === true){ setAmount(false); } else { setAmount(true); }; } return ( { !amount && } ) } function Alertamount(){ return ( 숫자 외에 쓰지 마세요. ) } 출처 : 코딩애플 https://codingapple.com/ 공감수 0 댓글수 0 2023. 5. 26.
React : 2초 뒤에 사라지는 alert 만들기 (useEffect, 숏서킷평가) 2초 뒤에 사라지는 alert 만들기 풀이 - 바닐라 js 버전 import { useEffect } from "react" function Detail(props){ useEffect(()=>{ setTimeout(()=>{ document.querySelector('.alert-warning').style.display = 'none' },2000) }); return ( 2초 이내 이벤트로 이동하세요 ) } 풀이 2 - react 스타일 버전 import { useEffect, useState } from "react" function Detail(props){ let [alert, setAlert] = useState(true); useEffect(()=>{setTimeout(()=>{ setAl.. 공감수 0 댓글수 0 2023. 5. 23.
React : 가나다정렬되어도 끄떡없는 상세페이지 불러오기 (useParams, find()) 가나다정렬되어도 끄떡없는 상세페이지 불러오기 조건 배열의 순서가 변경되기 전과 후가 같은 상품으로 이동되도록 만든다. 풀이 import { useParams } from "react-router-dom"; function Detail(props){ let {id} = useParams(); let selectedShoes = props.shoes.find(function(shoe){ return shoe.id === parseInt(id); }) return ( {selectedShoes.title} {selectedShoes.content} {selectedShoes.price} 주문하기 ) } export default Detail; find()를 사용하여 유저가 입력한 url파라미터와 상품 id가 .. 공감수 1 댓글수 1 2023. 5. 22.
React : 데이터 바인딩해서 컴포넌트로 뿌리기 (템플릿 리터럴 Template literal) 데이터 바인딩해서 컴포넌트로 뿌리기 조건 data.js로 분리되어있는 data를 바인딩해서 컴포넌트로 만들어 여러 상품을 한번에 뿌려야 한다. 풀이 function App() { let [shoes] = useState(data); return ( ShoeShop Home Cart Pricing { shoes.map(function(a, i){ return ( ) }) } ); } function Product(props){ return ( {props.shoes[props.i].title} {props.shoes[props.i].price} ) } 알게 된 점 중괄호({}) 내에서 문자열에 변수를 포함시키려면 템플릿 리터럴(Template literal) 문법을 사용해야한다. 템플릿 리터럴은 백틱(``.. 공감수 0 댓글수 0 2023. 5. 18.
React : input에 글 쓰면 게시글 추가하기 (onChange, 매개변수, trim, splice) input에 글 쓰면 게시글 추가하기 조건 input에 텍스트를 넣고 발행버튼을 클릭하면 게시글 목록 상단에 추가된다. 아무 텍스트도 입력하지 않았다면 발행을 막는다. 풀이 let [input, setInput] = useState(''); let handleSubmit = (e) => { e.preventDefault(); if (input.trim() !== ""){ let copyTitle = [...title]; copyTitle.unshift(input); setTitle(copyTitle); } else {alert(`글제목을 입력하세요.`)} } return ( { title.map(function(a,i){ return ( { title[i] } handlesetLike(i)}>👍 { li.. 공감수 0 댓글수 0 2023. 5. 11.
React : 클릭한 글의 제목이 모달에 뜨게 만들기 (props, 삼항연산자) 조건 클릭한 글의 제목이 모달에 뜨게 만들기 풀이 function App() { let [title, setTitle] = useState(['쌍검사길드에서 닌자시작퀘 받기', '파판14 초보자 가이드 이벤트 진행안내', '귀여운 구부 꼬마친구를 받아보자']); let [modal, setModal] = useState(false); let [titleindex, setTitleindex] = useState(0); return ( { title.map(function(a,i){ return ( { title[i] } { modal ? setModal(false) : (setModal(true), setTitleindex(i)) } }>🗨 2월 18일 발행 ); }) } {modal && } ); } f.. 공감수 0 댓글수 0 2023. 5. 8.
React : 좋아요버튼 만들기 (숏서킷평가,삼항연산자) 조건 좋아요 버튼을 누르면 각각의 게시글의 좋아요가 1씩 올라가야 한다. 풀이 function App() { let [title, setTitle] = useState(['쌍검사길드에서 닌자시작퀘 받기', '파판14 초보자 가이드 이벤트 진행안내', '귀여운 구부 꼬마친구를 받아보자']); let [like, setLike] = useState([0,0,0]); let handlesetLike = (i) => { let copyLike = [...like]; copyLike[i] = copyLike[i] + 1; setLike(copyLike); } return ( { title.map(function(a,i){ return ( { title[i] } handlesetLike(i)}>👍 { like[i].. 공감수 0 댓글수 0 2023. 5. 2.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.