React Hook Form폼을 쉽게 만들고 유효성 검사를 수행할 수 있도록 도와주는 라이브러리 성능이 좋고, 비제어 컴포넌트를 사용하며(제어 방식도 지원하는 듯), 소스코드가 깔끔하다. 더보기더보기더보기제어 컴포넌트 -> 사용자가 입력한 값이 state로 실시간 동기화됨. 데이터 검증에 유리하지만, 많은 리렌더링 발생 가능성도 높음 비제어 컴포넌트 -> 입력이 모두 끝난 후에 ref를 통해 값을 한번에 가져옴. 성능이 좋지만, 데이터 검증이 어려움 설치 방법npm install react-hook-formyarn add react-hook-form 기본 로그인 폼 이메일 비밀번호 로그인 );}여기에 리액트 훅 폼을 연결하면import { useF..
리액트 라우터 리액트는 웹페이지를 새로고침 하지 않고도 화면이 바뀌는 싱글 페이지 애플리케이션 (=SPA)를 만들 수 있다. 그래서 페이지 이동이 빠르고 부드럽게 느껴진다. 리액트 라우터 돔을 설치하는 방법은 먼저,yarn add react-router-dom터미널에 입력해 설치한다. // 1. 필요한 것들 가져오기import { BrowserRouter, Route, Routes } from "react-router-dom";function App() { return ( // 2. BrowserRouter로 감싸기 {/* 3. Routes로 감싸기 */} {/* 4. Route로 경로 설정 */} 메인페이지} /> 상품리스트} />..
useEffect가 필요한 이유 리액트에서는 상태가 변경되면 컴포넌트가 다시 렌더링 되는데, 컴포넌트가 렌더링 될 때마다 코드가 실행된다.axios.get 호출도 이때마다 실행된다.컴포넌트가 다시 렌더링 될때마다 axios.get이 실행되고, set~가 호출되어 상태가 변경되고 다시 렌더링된다.그럼 이 과정이 반복되면서 무한 렌더링이 발생한다. 이때, useEffect를 사용하면 컴포넌트가 처음 렌더링 될때만 코드가 실행되게 할 수 있다.useEffect(() => { axios.get("http://localhost:3000/posts").then((response) => { setPosts(response.data); });}, []);저기 뒤에 빈 배열은 컴포넌트가 처음 마운트 될 때만 실..
아 헷갈려... 일단 리액트 쿼리란? 데이터를 서버에서 가져와서 화면에 보여주는 것을 더 쉽게 해주는 도구다.특히 서버에서 데이터를 가져오고, 캐싱하고, 다시 가져오는 것들을 자동으로 해준다. 데이터를 쉽게 가져오고 관리할 수 있도록 도와주므로 웹사이트에서 사용자 정보, 게시글 목록을 가져올 때 사용할 수 있다. 먼저 React Query를 설치하고, yarn add @tanstack/react-query App.jsx 나 Main.jsx 등에 provider를 이용해서 적용한다.import { QueryClient, QueryClientProvider } from "@tanstack/react-query";const queryClient = new QueryClient();ReactDOM.createR..
다시 한 번 디스패치 정리!! 1. set ~ (상태를 변경하는) 을 사용하고 싶으면 dispatch로 보내줘야 한다.const dispatch = useDispatch();그럼 이거 넣어주고, import { useDispatch } from 'react-redux';이것도 빼먹지 말고 dispatch(setSaveMonth(month));이렇게 사용하고, import { setSaveMonth } from './../store/slices/budgetSlice';이것도 빼먹지 말고 사용!상태 업데이트 할 때 필요하다. 이제 유즈셀렉터 정리! import { useDispatch, useSelector } from 'react-redux';이거 넣어줘. const saveMonth = useSel..
이제 store로 이동. 기본 형태는 이러하다.import { configureStore } from '@reduxjs/toolkit';import budgetReducer from './slices/budgetSlice';const store = configureStore({ reducer: { buget: budgetReducer, },});export default store;configurestore을 가져오고, slice 파일을 가져온다.여기서의 리듀서는 리덕스 스토어에 어떤 리듀서를 사용할지 알려준다. 그리고 main.jsx에 가서ReactDOM.createRoot(document.getElementById('root')).render( );이렇게 감싸..
