react

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 : AJAX로 서버와 통신하기 (ajax, axios)

서버에 GET/POST 데이터 요청하기 서버에 데이터를 요청할 때는 아래같이 정확한 규격에 맞추어 요청해야 한다. 어떤 데이터인지 (URL) 어떤 방법으로 요청할지 (GET : 서버에서 데이터를 가져올 때 / POST : 데이터를 서버로 보낼 때) 요청하는 법 POST 요청을 날리고 싶으면 태그를 이용한다. GET 요청을 날리고 싶으면 브라우저 주소창에 URL을 적는다. 그러나 이 방법은 브라우저가 새로고침이 된다는 단점이 있다. AJAX 그래서 새로고침 없이 데이터를 주고받을 수 있게 도와주는 브라우저 기능인 AJAX를 쓴다. AJAX로 GET/POST 데이터 요청하는 법 XMLHttpRequest라는 옛날 문법 쓰기 fetch()라는 최신 문법 쓰기 axios같은 외부 라이브러리 쓰기 axios 설치..

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 : useEffect, clean up (실행조건)

useEffect 실행조건 useEffect(()=>{ 실행할코드 }, [변수나state]); useEffect()의 둘째 파라미터로 []를 넣으면, 안의 변수나 state가 변할 때마다 useEffect 안의 코드를 실행한다. []안에는 state나 변수를 여러개 넣을 수 있다. [] 안에 아무것도 넣지 않으면 mount(로드)시에만 1회 실행한다. clean up function useEffect(()=>{ //함수 A return ()=>{ //함수 B } }, [변수나state]) 예시 useEffect(()=>{ let timer = setTimeout(()=>{ setAlert(false) },2000) return ()=>{ clearTimeout(timer) } // 기존 타이머 제거 },..

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 : Lifecycle, useEffect (사용법)

Lifecycle mount (장착) 컴포넌트가 있는 페이지로 들어갔을 때 컴포넌트가 mount(장착)된다. update (업데이트) 컴포넌트 안에서 state가 조작되는 등 재랜더링되어 업데이트가 일어난다. unmount (제거) 다시 홈으로 돌아가면 Detail 컴포넌트가 unmount(제거)된다. Lifecycle hook (간섭) 그리고 위 Lifecycle들이 일어나는 시점에 코드를 실행할 수 있다. 사용법 - 옛날 class 문법 class Detail2 extends React.Component { componentDidMount(){ //Detail2 컴포넌트가 로드되고나서 실행할 코드 } componentDidUpdate(){ //Detail2 컴포넌트가 업데이트 되고나서 실행할 코드 }..