분류 전체보기
-
컴포넌트 성능 최적화(함수형 업데이트, 리덕스)프론트엔드 2022. 8. 18. 14:50
컴포넌트가 리렌더링하는 순간 1. 자신이 전달받은 props가 변경될 때 2. 자신의 stat가 바뀔 때 3. 부모 컴포넌트가 리렌더링 될 때 4. forceUpdate 함수가 실행될 때 컴포넌트 2000개가 리렌더링 된다면? 앱의 성능이 급격히 저하된다. 따라서 컴포넌트 리렌더링 성능을 최적화해줄 필요가 있다. 1. React.memo : 컴포넌트의 props가 바뀌지 않았다면, 리렌더링을 하지 않도록 한다. const TodoList = ({ todos, onRemove }) => { return ( {todos.map((todo) => ( ))} ); }; export default React.memo(TodoList); 컴포넌트를 만들고 감싸주기만 하면 된다. 2. useState의 함수형 업데이..
-
-
케이커 웹/앱 - 4 (파일 업로드, 드래그 앤 드롭)프론트엔드 2022. 8. 14. 23:33
DND 코드,, 이거 구현하려고 일주일이나 걸렸다. 코드 정보가 워낙 없어서 조금 힘들었던😂 이미지 파일 2개를 한 번에 업로드 해야했어서 js파일에 변수명만 다르게 작업을 해봤지만 import { useDropzone } from "react-dropzone"; 에서 제공하는 변수명이 고정되어 있어서 어쩔 수 없이 컴포넌트 2개로 나누어 작업을 진행했다. Fileupload > ShopImgUpload.js import styled from "styled-components"; import React, { useEffect, useState } from "react"; import { useDropzone } from "react-dropzone"; const ShopIntroduceName = sty..
-
케이커 웹/앱 - 3 (사이드바)프론트엔드 2022. 8. 14. 23:25
Sidebar > SidebarData.js export const SidebarDataGuest = [ { title: "CAKER 소개", path: "/about" }, { title: "전체 제안서 리스트", path: "/allproposal" }, ]; //가게-인증o export const SidebarDataBaker = [ { title: "CAKER 소개", path: "/about" }, { title: "전체 제안서 리스트", path: "/allproposal" }, { title: "마이페이지", path: "/caker/mypage" }, ]; //가게-인증x export const SidebarDataShop = [ { title: "CAKER 소개", path: "/abou..
-
케이커 웹/앱 - 2 (마이페이지)프론트엔드 2022. 8. 14. 12:47
CakerMyPage.js import TopBar from "../../components/Common/Sidebar/TopBar"; import styled from "styled-components"; import PageTitle from "../../components/Common/PageTitle"; import { Link } from "react-router-dom"; import { useState, useEffect } from "react"; import http from "../../common/http"; import { useAppSelector } from "../../store"; const ShopCakerMyPage = () => { const [Mydatas, setMy..
-
케이커 웹/앱 - 1 (가게 정보 등록 및 수정, 가게 정보 미리보기)프론트엔드 2022. 8. 14. 10:37
const.js 상수 데이터 모음 default 생략 시, 한 파일에 여러 export 구현 가능 export const SHOP_DATA = [ { key: "name", height: "60px", placeholder: " 정확한 상호명을 입력해주세요.", keyword: "가게 이름", }, { key: "readme", height: "125px", placeholder: " 자신의 가게를 자유롭게 소개해주세요! (최대 300자)", keyword: "가게 소개", }, { key: "phoneNumber", height: "60px", placeholder: " ex. 02-0000-0000", keyword: "전화번호", }, { key: "address", height: "60px", p..