분류 전체보기

[REACT] Axios

AJAX: JS의 라이브러리 중 하나, 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용하여 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 한 데이터 로드 -> 즉, JS를 통해서 서버에 데이터 요청 fetch와 axios의 차이점 Fetch()는 body 프로퍼티를 사용하고,axios는 data 프로퍼티를 사용한다. Fetch의 url이 Fetch()함수의 인자로 들어가고, axios에서는 url이 option객체로 들어간다. Fetch에서 body부분은 stringify()로 되어진다. Axios? 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리. *백엔드와 프론트엔드 통신을 쉽게하기 위해 AJAX도 더불어 사용하기도 함. 사용법 운영..

[REACT] "Coin Tracker" fetch / useEffect / map / api data

useEffect(() => { //패치해온 것 네트워크에서 확인 가능 //response로부터 json 추출 why? json안에 코인 데이터 있음. fetch("https://api.coinpaprika.com/v1/tickers") .then((response) => response.json()) .then((json) => console.log(json)); }, []); //코드 한번만 동작 패치해 온 것은 네트워크 창에서 확인 가능함 json 안에 있는 데이터 사용 -> response로부터 json을 추출해야함 데이터를 컴포넌트에서 보여주는 방법 -> data를 state에 넣으면 됨 . const [coins, setCoins] = useState([]); .then((json) => { ..

[REACT] Event

{console.log(e.target.value);}}> e.target.value : 이벤트 발생할 때, 앞으로 변할 인풋 값 import { useState } from "react" const EventPrac = () => { const [username, setUsername] = useState(''); const [messeage, setMessage] = useState(''); const onChangeUser = event => setUsername(event.target.value); const onChangeMes = event => setMessage(event.target.value); const onClick = () => { alert(username + ':' + mess..

[REACT] map / key

import { useState } from "react"; function App() { const [toDo, setTodo] = useState(""); const onChange = (event) => setTodo(event.target.value); // console.log(toDo); const onSubmit = (event) => { event.preventDefault(); console.log(toDo); }; return ( Add To Do ); } export default App; *event.preventDefault 어떤 이벤트를 명시적으로 처리하지 않은 경우, 해당 이벤트에 대한 사용자 에이전트의 기본 동작을 실행하지 않도록 지정. const [toDos, setTodo..

[REACT] component / state / useEffect

import Button from"./Button"; import styles from "./App.module.css" import {useState} from "react"; function App() { const [counter, setValue] = useState(0); const onClick = () => setValue((prev) => prev+1); return ( {counter} click me ); } export default App; state 사용 후 value 받아오고, value 수정을 위해 function을 받아옴. previous state를 받아 +1 한 값을 return하는 function 생성한 후에 그 값을 h1을 통해 보여줌 그리고 button 태그에 onC..

[REACT] create-react-app

Button.js button 태그에 스타일 지정하는 대신, Button.module.css를 Button.js에 styles로 import하고, styles의 btn을 styles.btn으로 사용 리액트는 자동으로 랜덤한 class name을 지정해준다. 우리가 고민하지 않아도 됨. 짱 좋음 이게 App.module.css 파일 쨌든 컴포넌트를 위한 css 따로 만들고 import 가능.! module.css 형식으로 파일 이름 지정하기