개발일지

- 몇 초마다 자동으로 데이터 다시 가져오기 - 요청 실패 시 몇 초 간격으로 재시도 - 다음 페이지 미리 가져오기 - 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..

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..

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])..

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

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

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..

리액트에서 페이지를 나누고 싶을 때, 일반 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..

[ { 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..

HTML 안에 이미지 넣고 싶으면 이미지를 import 하고 사용해야한다. import bg from './bg.png' function App(){ return ( ) } 1. import 이름 from './이미지경로' 하고 2. 이미지 경로가 필요한 곳에서 import 한 것 사용한다. 태그 사용하고 싶으면 사용한다. css 파일 사용해도 된다. Public 폴더 용도 여러 소스코드는 src 폴더에 보관하는데, 이미지같은 static 파일의 경우 public 폴더에 보관해도된다. 리액트로 개발을 끝내면 build 해주게 되는데, 지금까지 짰던 코드들을 한 파일로 압축해주는 작업이다. src 폴더에 있던 코드와 파일들은 다 압축 되는데, public 폴더에 있는 것들은 그대로 보존한다. 따라서 형태를..

예전 리액트에서는 class 문법을 사용하였다. 개발하다보면 옛날 코드를 볼 경우도 있으니 참고해두면 좋다. class Modal2 extends React.Component { constructor(){ super() } render(){ return ( Hi ) } } 1. class 컴포넌트 이름을 작명한다. 2. constructor, super, render 함수 3개 채워넣는다 (생성자) 3. 컴포넌트는 길고 복잡한 HTML을 축약할 때 사용. return 안에 축약할 HTML을 적는다. class 컴포넌트 안에서 state 사용 class Modal2 extends React.Component { constructor(){ super(); this.state = { name : 'kim', ..