⚛️ React/문제풀기 (코딩애플: React)

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..

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..

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/

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..

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가 ..

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) 문법을 사용해야한다. 템플릿 리터럴은 백틱(``..