react-query

- 몇 초마다 자동으로 데이터 다시 가져오기 - 요청 실패 시 몇 초 간격으로 재시도 - 다음 페이지 미리 가져오기 - ajax 성공 / 실패 시 각각 다른 화면 보여주기 ajax 요청하다가 보면 위와같은 기능들 필요하다 react-query 사용하면 더욱 편리하다 실시간 데이터 보여주어야 하는 사이트들에서 유용 react-query 설치 세팅 터미널에 npm install react-query 작성 index.js 파일에서 import { QueryClient, QueryClientProvider } from "react-query" //1번 const queryClient = new QueryClient() //2번 const root = ReactDOM.createRoot(document.getEl..

• format_list_bulleted FrontEnd/React
• · 2023. 3. 9.
• textsms

Redux

Redux 는 props 없이 state 를 공유할 수 있게 도와주는 라이브러리이다. Redux 설치하면 js 파일 하나에 state 들을 보관할 수 있는데, 모든 컴포넌트들이 직접 꺼내서 사용할 수 있다. 따라서 귀찮은 props 전송이 필요가 없어진다. Redux 설치하기 npm install @reduxjs/toolkit react-redux 터미널에 입력해주면 설치된다. redux toolkit 은 redux 의 개선버전이라고 생각하면 된다. ( 문법이 좀 쉬워진 ) 설치 전 pakage.json 파일에서 "react", "react-dom" 항목의 버전이 18.1 이상인 것을 확인하자 Redux 세팅 import { configureStore } from '@reduxjs/toolkit' exp..

• format_list_bulleted FrontEnd/React
• · 2023. 3. 7.
• textsms

Context API

App 에 있던 state 를 손자 컴포넌트에서 사용하고 싶다면 어떻게 할까? props 를 하위로 2번 전송해주어야한다. 하지만 이런 과정은 귀찮기 때문에 Context API 문법이나 Redux 같은 외부 라이브러리를 사용한다. Context API 문법으로 props 없이 state 공유하기 재고라는 state 를 App 컴포넌트에 만들고 이 state 를 TabContent 라는 자식컴포넌트에서 쓰고 싶을 때 Context API 문법을 사용하면 props 전송 없이도 손자 컴포넌트에서 사용할 수 있다. (App.js) export let Context1 = React.createContext(); function App(){ let [재고, 재고변경] = useState([10, 11, 12])..

• format_list_bulleted FrontEnd/React
• · 2023. 3. 7.
• textsms

Ajax 요청

서버란? 유저가 데이터 요청하면 유저에게 데이터 보내주는 프로그램이다. 서버에 데이터 요청할 때는 정확한 규칙에 맞춰 요청해야하는데 1. 어떤 데이터인지 (URL 형식) 2. 어떤 방법으로 요청 (GET or POST) 두 가지 잘 지켜서 데이터 보내야한다. 데이터를 가져올 때는 GET 요청하고, 데이터를 서버로 보낼 땐 POST 요청을 한다. 어떤 데이터를 가져오고 싶은지 URL 잘 작성해주면 된다. GET / POST 요청하는 법 GET 요청하는 가장 쉬운 방법은 브라우저 주소창 이용하는 것이다. 주소창에 URL 적으면 그 URL로 GET 요청을 보내준다. POST 요청할 땐 태그 이용하면 된다. 그러면 폼이 전송되었을 때 POST 요청 보내준다. 그런데 GET, POST 요청하면 단점이 브라우저가 ..

• format_list_bulleted FrontEnd/React
• · 2023. 3. 7.
• textsms

Lifecycle 과 useEffect

컴포넌트의 Lifecycle 을 배우는 이유는 componentDidMount() 등 유용한 Lifecycle 함수들을 쓰기 위해서이다. 요즘은 간편한 useEffect() 라는 react hook 을 많이 사용한다. 컴포넌트의 Lifecycle 컴포넌트는 1. 생성 될 수도 있고 (mount) 2. 재렌더링 될 수도 있고 (update) 3. 삭제될 수도 있다. (unmount) 컴포넌트의 lifecycle 을 배우는 이유는 컴포넌트 lifecycle 중간중간에 간섭할 수 있기 때문이다. 컴포넌트가 장착될 때 특정 코드를 실행할 수도 있고, 컴포넌트 업데이트 될 때 특정 코드를 실행할 수도 있다. 이러한 방법으로 여러 기능들을 개발할 수 있다. 예전 React 에서 Lifecycle Hook 쓰는 법 ..

• format_list_bulleted FrontEnd/React
• · 2023. 2. 26.
• textsms

React Router (navigate, nested routes, outlet), useParams

navigate, nested routes, outlet 을 사용하기 위해선 상단에 먼저 import 해준다. import { Routes, Route, Link, useNavigate, Outlet } from 'react-router-dom' 페이지 이동기능 useNavigate() 페이지 이동을 할 때 Link 를 사용해도 되지만, useNavigate() 사용하면 더 편리하다. function App(){ let navigate = useNavigate() return ( (생략) { navigate('/detail') }}>이동버튼 ) } useNavigate() 사용하면 유용한 함수들을 사용할 수 있는데, 페이지 이동 기능을 사용할 수 있다. navigate('/detail') 사용하면 /de..

• format_list_bulleted FrontEnd/React
• · 2023. 2. 25.
• textsms