axios

React : AJAX로 서버와 통신하기 (post, 동시에 요청 여러개 날리기, fetch)

POST 요청 하는 법 서버에 데이터를 보내기 위해서는 아래처럼 작성하면 된다. axios.post('URL', {name : 'kim'}) 동시에 AJAX 요청 여러개 날리기 동시에 여러 url로 ajax 요청을 날리려면 아래처럼 작성하면 된다. 그 아래 then()을 붙이면 둘 다 완료되었을 시 코드를 실행한다. Promise.all( [axios.get('URL1'), axios.get('URL2')] ) .then(()=>{}) fetch axios 라이브러리를 사용하면 자동으로 JSON을 object/array 형태로 변환해주지만, 그냥 fetch를 쓰면 변환해줘야 한다. fetch('URL').then(결과 => 결과.json()).then((결과) => { console.log(결과) } )..

React : 더보기 버튼을 누를 때마다 다른 get주소 데이터 불러오기 (+로딩중)

조건 더보기 버튼을 1번과 2번 누를 때 각각 다른 get 주소 상품 데이터를 불러오고, 3번 누르면 더이상 상품이 없다고 표시한다. 풀이 '3번 이상 더보기 버튼을 눌렀을 시 더이상 상품 없음 알림'과 '더보기 버튼 클릭 횟수'를 state로 작성했다. 버튼 클릭 시 클릭 횟수를 1 증가시키는 콜백함수(handleClick)를 작성해 버튼 이벤트핸들러 안에 넣었다. 더보기 버튼 클릭 시 실행될 콜백함수(moreProduct)를 작성했다. - ajax로 상품데이터를 불러오기 전 loading을 실행시켰다. (setLoading(true);) - 클릭 횟수에 따른 url을 변수로 만든 후, if문으로 처리하였다. (3번 이상 클릭 시 '상품 없음 알림' true, '로딩' false, ajax 실행을 중단..

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

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