본문 바로가기

React

 (57)
[React] Thunk Redux 미들웨어 액션 -> (미들웨어) -> 리듀서 -> 스토어 리덕스에서 dispatch 를 하면 action이 리듀서로 전달되고, 리듀서는 새로운 state 를 반환한다. 근데 미들웨어를 사용하면 이 과정 사이에 우리가 하고싶은 작업들을 넣을 수 있음. ex) 만약 counter 프로그램에서 더하기 버튼을 클릭했을 시, 바로 +1 을 더하지 않고 3초를 기다렸다가 +1 이 되도록 구현하려면 미들웨어를 사용하지 않고는 구현 불가능. 이는 dispatch가 되자마자 action이 리듀서로 달려가서 새로운 state를 반환해버리기 때문. 여기서 3초를 기다리는 작업 -> 미들웨어가 해주는 역할. 미들웨어를 사용하는 이유는 서버와의 통신을 위해서 사용하는 것이 대부분이고, 많이 사용되는 것은 Redux-..
[React] instance 와 interceptor Interceptor의 필요성 axios.get("http://localhost:3001/todos"); axios.post("http://localhost:3001/todos", todo); axios.delete(`http://localhost:3001/todos/${todoId}`); 이렇게 호출하는 부분이 리액트 앱에 300개 정도 있다고 가정하면, 호출 서버가 변경되었을 때 300개를 모두 변경해 주어야 한다. 이는 리소스적으로 엄청난 낭비이다. axios는 이름에서 알 수 있듯이 다음과 같은 상황에서 흐름을 가로채서 코드상의 관여를 할 수 있게 한다. (1) 요청(request) 이 처리되기 전 (= http request 가 서버에 전달되기 전) (2) 응답(response) 의 then (..
[React] Fetch 와 Axios 1. Fetch fetch 는 자바스크립트 내장 라이브러리로, 패키지 설치가 필요 없음. 그러나 다음과 같은 단점이 있음. - 미지원 브라우저 존재 - 개발자에게 불친절한 response - axios 에 비해 부족한 기능 2. Axios axios 란 node.js 와 브라우저를 위한 Promise 기반 http 클라이언트 [데이터 읽어오기] fetch const url = "https://jsonplaceholder.typicode.com/todos"; fetch(url) .then((response) => response.json()) .then(console.log); - fetch().then 을 한 상태여도 여전히 JSON 포맷의 응답이 아니기 때문에, response.json()을 한번 더 ..
[React] 비동기 통신 axios(patch) PATCH 요청 (내용 수정하기) import axios from "axios"; import "./App.css"; import { useEffect } from "react"; import { useState } from "react"; function App() { const [todos, setTodos] = useState(null); const [inputValue, setInputValue] = useState({ title: "", // title 을 입력하는 것 이므로 title 값을 넣어줌. }); const [targetId, setTargetId] = useState(""); const [content, setContent] = useState(); // 서버로 부터 값 받아오는 함..
[React] 비동기 통신 axios(delete) DELETE 요청 import axios from "axios"; import "./App.css"; import { useEffect } from "react"; import { useState } from "react"; function App() { const [todos, setTodos] = useState(null); const [inputValue, setInputValue] = useState({ title: "", // title 을 입력하는 것 이므로 title 값을 넣어줌. }); const fetchTodos = async () => { // 서버로부터 값 요청, 비동기 const { data } = await axios.get("http://localhost:4000/todos")..
[React] 비동기 통신 axios(post) POST 요청 import axios from "axios"; import "./App.css"; import { useEffect } from "react"; import { useState } from "react"; function App() { const [todos, setTodos] = useState(null); const [inputValue, setInputValue] = useState({ title: "", // title 을 입력하는 것 이므로 title 값을 넣어줌. }); const fetchTodos = async () => { // 서버로부터 값 요청, 비동기 const { data } = await axios.get("http://localhost:4000/todos"); ..
[React] 비동기 통신 axios(get) GET 요청 db.json에 저장한 값을 port 4000 을 통해 가져옴 function App() { const fetchTodos = async () => { // 서버로부터 값 요청, 비동기 const { data } = await axios.get("http://localhost:4000/todos"); // 서버로부터 값을 받을때 까지 기다림 console.log("data", data); }; useEffect(() => { // 마운트 되었을 때 실행할 로직, db로부터 값을 가져올 것이다. fetchTodos(); return () => { // 언마운트 되었을 때 리턴할 값 }; }, []); // 어떤 state 가 변경될 때, 실행하는지 결정 return Axios; } 또한 가져온..
[React] HTTP 웹 통신 서버와 클라이언트 간의 대화이며 약속(프로토콜) 이다. 프로토콜 사람들끼리 대화를 하기 위해 언어적, 문화적으로 정립된 약속이 있음. 웹 또한 서버와 클라이언트가 대화하기 위해 서로 약속된 방식이 필요하다. 그 방식대로 데이터를 전달해야 오류가 없어지게 된다. 이 약속을 프로토콜(protocol) 이라고 하며, 웹에서 서버 클라이언트간 주고 받은 상호간의 약속(프로토콜) 을 HTTP 라고 한다. 요청(Request) 과 응답(Response) 서버와 클라이언트가 서로 데이터를 주고받기 위해서는 항상 요청해야 하며 그에 따른 응답을 준다. 보통 클라이언트가 대화를 시도하며 서버는 요청을 받아 그에 따른 응답을 줌. URL 에 대하여 https:// : 프로토콜 www. : Subdomain hos..

티스토리툴바