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

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

React Router

리액트에서 페이지를 나누고 싶을 때, 일반 html, css, js 사이트는 그냥 html 파일을 여러 개 만들면 된다. 하지만 리액트는 html 파일을 하나만 사용한다. 따라서 사용자가 페이지 요청하면 내부에 있는 를 갈아치워서 보여주어야한다. 하지만 직접 코드 짜는 것은 비효율적이므로 react-router-dom 이라는 외부 라이브러리를 설치해서 구현하는 것이 일반적이다. react-router-dom 설치 터미널에 npm install react-router-dom@6 입력하여 설치 import { BrowserRouter } from "react-router-dom"; const root = ReactDOM.createRoot(document.getElementById('root')); root..

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

export / import

[ { id : 0, title : "White and Black", content : "Born in France", price : 120000 }, { id : 1, title : "Red Knit", content : "Born in Seoul", price : 110000 }, { id : 2, title : "Grey Yordan", content : "Born in the States", price : 130000 } ] 위와같이 상품 데이터가 array 자료형 안에 object 자료형 세개가 존재하는 형태로 존재한다고 하자. [{},{},{}] 위의 데이터를 state 로 만들고 싶은데 좀 길다. 이럴 땐 다른 파일에 보관했다가 import 해서 사용할 수 있다. (data.js 파일) le..

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