전체 글 (76) 썸네일형 리스트형 [TIL] Mutation Mutation 어떤 데이터를 변경하는 것 (= 변화) 어떤 데이터라 함은 추가, 수정, 삭제를 의미한다. CRUD 중, CUD에 해당한다. axios의 경우 post, put, patch, delete 요청과 비슷하다. axios.post('http://localhost:3000/todos', newTodo); axios.patch(`http://localhost:3000/todos/${id}`, {isDone: true}); axios로 데이터 추가하기 const addTodo = async (newTodo) => { await axios.post(`${process.env.REACT_APP_SERVER_URL}/todos`, newTodo); } 이제 값을 넣었을 때 변형할 수 있는 리액트쿼리 방법.. [TIL] React Query 리액트 쿼리의 장점으로는 너무 쉽다고한다. 이번 팀프로젝트를 시작하기 전에 쿼리를 써보기로 했다. Query 어떤 데이터에 대한 요청을 의미한다. axios의 경우 get 요청과 비슷하다. DB를 요청하는 ! 뭔가를 알려주는 GET 요청과 비슷하다. const response = await axios.get('http://localhost:3000/todos') Query Invalidation ( = 무효화 시킨다) 기존에 가져온 Query는 서버 데이터이기 때문에, 언제든지 변경이 있을 수 있어요. 그렇기 때문에 최신 상태가 아닐 수 있다. 그런 경우 기존의 쿼리를 무효화 시킨 후 최신화 시켜야하는데 이런 과정을 쿼리는 자동으로 해준다. 리액트 쿼리 설치하기 yarn add react-query im.. [TIL] 로그인 후 특정 페이지 Router.jsx에서 로그인 된 사람만 특정 페이지에 들어올 수 있게끔 하는걸 구현하고 싶어서 하는 중에 function Router() { return ( ); } export default Router; 원래 이렇게해서 React-router-dom v6에서 도입된 라우트 구조를 지정하는 데 사용되는 React 컴포넌트 Outlet을 사용하려고 하였으나 따로 파일을 만들지 않고 쉬웠던 방법이 있어 바꿔보았다. function Router() { const isLogin = useSelector((state) => state.AuthSlice.isLogin); return ( {isLogin ? ( ) : ( )} ); } export default Router; 이전 1 ··· 4 5 6 7 8 9 10 ··· 26 다음