Language/React 10

React - SideProject 쇼핑몰 (8) - useMemo, memo

부모 컴포넌트가 재렌더링 되면 자식 컴포넌트들도 전부 재렌더링 되는데 자식 컴포넌트들 중에 렌더링 시간이 오래걸리는 게 있으면 지연시간이 발생된다 이때, 꼭 필요할 때만 자식 컴포넌트를 렌더링 할 수 있는 방법 ! import {memo, useState} from 'react' let Child = memo( function(){ console.log('재렌더링체크') return 자식 컴포넌트 }) function Cart(){ let [count, setCount] = useState(0) return ( { setCount(count+1) }}> + ) } memo로 감싸져있기 때문에 재렌더링이 되지 않는다 memo의 원리 : props가 변할때마다 재렌더링 해줌 useMemo :컴포넌트 렌더링 ..

Language/React 2024.01.25

React - 쇼핑몰 웹사이트 (6) - React Query

1. 실시간 데이터 React Query index.js 세팅 해줘야함 import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query' const queryClient = new QueryClient() //2번 const root = ReactDOM.createRoot(document.getElementById('root')); root.render( //3번 ); { return 값 } = 값 같은 말 function App(){ let result = useQuery('작명', ()=> axios.get('https://codingapple1.github.io/userdata.json') .then((a)=>{ re..

Language/React 2024.01.25

React - 쇼핑몰 웹사이트(4) - UseEffect, Clean up Function, AJAX, Context API

React - 쇼핑 LifeCycle과 UseEffect 1 컴포넌트의 lifecycle : 페이지에 장착된다 (mount) : 가끔 업데이트가 되기도 함 (update) : 필요 없으면 제거가 되기도함(unmount) useEffect(()=>{ },[변화되는 변수]) mount가 되거나 update가 될때 useEffect가 실행됨 / 변수가 바뀔때도 실행됨 function Detail(props){ useEffect(()=>{ console.log('안녕')) } useEffect 쓰는 이유 1. html렌더링 이후에 동작함 html을 먼저 보여주기 때문에 화면의 변화가 빠르다고 느껴질 수 있음 function Detail(){ let [alert, setAlert] = useState(true) ..

Language/React 2024.01.23

React- 쇼핑몰 웹사이트 (2) - Modal, Map, Splice, Unshift

모달 창 UI 만드는 방법 1. html css로 미리 디자인을 완성 2. UI의 현재 상태를 state로 저장 3. state에 따라서 UI가 어떻게 보일지 작성 ! 삼항 연산자 html코드쪽에서는 javascript코드를 작성할 수 없음 { }안에는 if문을 사용하는게 아니라 삼항연산자를 사용해서 조건식을 표현함 Map : 많은 div 들을 반복문으로 줄이고 싶을 때 1. array의 자료 갯수 만큼 함수안의 코드를 실행해줌 2. 함수의 파라미터는 array안에 있는 자료이다 3. return에 뭐 적으면 array로 담아줌 ! 중괄호 안에서는 for반복문을 사용할 수 없고 map()함수를 써야함 array이름.map(function(a, i){ return ( ) } 자식이 부모의 state를 가져..

Language/React 2024.01.22

React - 쇼핑몰 웹사이트 (1) - useState, Component

잠깐 저장하고 싶은 변수는 그냥 변수에 저장 또한 state에 작성할 수 있음 let post = '강남 우동 맛집' let [글제목,b] = useState('남자 코트 추천', 함수) state와 변수의 차이 ? 글제목이라는 '남자 코트 추천' 이 변경이 되는 순간 state가 되는 html 은 재렌더링이 자동으로 된다 변동시 자동으로 html에 반영되게 만들고 싶을 때 state를 써야함 !! 더 쉽게 ? 자주 변경 될 것 같은 html은 state로 만들어 놓으면 됨 const [title1, setTitle1] = useState('남자 코트 추천') const [title2, setTitle2] = useState('강남 우동 맛집') const [title3, setTitle3] = useS..

Language/React 2024.01.22

React 쇼핑몰 사이트 만들기 (3) - Redux 사용하기

store에 각각 ~.slice.js 파일을 생성해줌 (product는 products , product 두개를 생성) main store를 만들기 위해서 store/index.js 파일 생성해줌 import {configureStore} from "@reduxjs/toolkit" import userSlice from "./user/user.slice" import categoriesSlice from "./categories/categories.slice" import productsSlice from "./products/products.slice" import cartSlice from "./cart/cart.slice" import productSlice from './products/produ..

Language/React 2024.01.18

React 쇼핑몰 사이트 만들기 (2) - 로그인 인증 기능

지금 진행하고 있는 프로젝트에서는 로그인 페이지와 / 회원가입 페이지의 UI가 동일하기 때문에 title을 props로 내려줘서 화면의 최상단 title만 바꾸어주는 방식으로 사용 -> Form 컴포넌트가 1개로 존재 React Hook Form 을 이용한 유효성 체크 https://react-hook-form.com React Hook Form - performant, flexible and extensible form library Performant, flexible and extensible forms with easy-to-use validation. react-hook-form.com React Hook Form에서 제공하는 useForm을 사용해서 register, handleSubmit, ..

Language/React 2024.01.17

React 쇼핑몰 사이트 만들기 (1) - 구조 / 패키지 설치

[ 프로젝트 시작 ] npm init vite -> react / javascript [ 필요한 패키지들 설치] npm install [ 패키지 추가 설치] npm install axios react-router-dom react-redux react-icons sass @reduxjs/toolkit react-loading-skeleton [ 소스구조 만들기 ] 각 Pages들 안에 index.jsx파일을 생성하고 다 복사 붙여넣기 해줌 rafce 로 페이지 이름이랑 동일하도록 컴포넌트를 만든다. Component에는 Loader.jsx / Loader.module.scss 두가지씩 파일을 생성해줌. rafce로 컴포넌트 이름이랑 동일하도록 만들어줌 [ App.jsx파일에 라우팅 추가 ] src / A..

Language/React 2024.01.17