072DATA

목표useMemo와 useCallback의 동작 원리 이해두 Hook의 차이점과 각각의 사용 의도 파악 (!)실제 프로젝트에서의 적용 방법 습득성능 최적화 관점에서의 이해 React의 렌더링 특성React에서 컴포넌트는 다음과 같은 경우에 리렌더링됨state가 변경될 때props가 변경될 때부모 컴포넌트가 리렌더링될 때이러한 리렌더링은 때때로 불필요한 계산이나 렌더링을 발생시킬 수 있음 Memoization이란?이전에 계산한 값을 저장해두고 동일한 입력이 들어올 때 재사용하는 기법컴퓨터 프로그래밍에서 속도를 향상시키는 최적화 기술 중 하나 그럼 이제 useMemo와 useCallback 알아보겠음 useMemo 사실 useMemo 관련해서 포스팅을 한 적이 있긴한데 다 까먹고 제대로 정리된 것 같지도 않..

오늘은 달력을 구현했는데  useCalendar라는 훅을 만들어서달력에 관련된 로직을 관리하여 꽤 깔끔하게 설계가 된듯하다아직까지는 이벤트 관련 로직이 없어서 UI 정도만 설계했다다음 업데이트 해야할 사항으로 각 날짜별로 통계를 내려주고 해당 월의 통합 데이터까지 출력해야 한다  🛠️ 전체 구조 및 기술 스택React와 TypeScript를 사용한 달력 구현dayjs 라이브러리로 날짜 처리Custom Hook을 통한 로직 관리Tailwind CSS로 스타일링   💡 주요 로직 분석1. Custom Hook (useCalendar)상태 관리const [currentMonth, setCurrentMonth] = useState(dayjs()); 현재 표시되는 월을 상태로 관리dayjs 인스턴스를 초기값으..

공부하다보니 상태 관리 라이브러리에 대해서 정리하면 도움이 될 것 같아서 정리해보려고 한다  상태 관리의 필요성리액트에서는 컴포넌트의 상태를 props와 state를 통해 관리하는데다음과 같은 상황에서는 효율적인 상태 관리가 어렵다.여러 컴포넌트가 동일한 상태를 공유해야 하거나 상태 구조가 복잡해질 때.컴포넌트 트리 구조에서 상태를 여러 단계에 걸쳐 전달해야 할 때 (prop drilling이라고 함).로그인 정보나 테마 설정 등 전역에서 사용되는 상태를 관리할 때.이러한 문제를 해결하기 위해 상태 관리 라이브러리를 사용함각 라이브러리마다 특징과 장단점을 가지고 있고프로젝트에 알맞은 도구를 선택하는 것이 중요하다고 생각한다  Context API Context API는 리액트에 내장된 상태 관리 기능인데..

오늘은 useSuspenseQuery(그리고 React Suspense)와 ErrorBoundary를 사용하여비동기 데이터를 요청할 때 로딩과 에러 처리를 효율적으로 다뤄보겠슨비다. useSuspenseQuery 란..? React Suspense와 Tanstack Query를  함께 사용하여데이터 로딩 상태를 관리하는 훅입니다. useQuery와 비슷하지만 Suspense와 함께 작동합니다.기본적으로 Suspense에서 로딩 상태를처리하고 useSuspenseQuery는  성공적인 응답 데이터를 반환할 때까지컴포넌트의 렌더링을 중단하는 역할입니다!  여기서 React Suspense는 비동기 데이터를 가져올 때 동안 UI를 렌더링하지 않고 대기하는 기능입니다따라서 Suspense를 사용하여 로딩중이라는..

오늘은 팀원분이 구현해주신 로그인 기능에서 로그인된 유저의 정보를 props로 전달하지 않고zustand를 사용하여 유저의 정보를 전역 상태로 관리하는 과정을 기록해볼게요 API 요청export const login = async (userData) => { const response = await axios.post(`${API_URL}/login`, userData); return response.data;}; 로그인 핸들러 const handleLogin = async (formData) => { try { const loginData = await login(formData); localStorage.setItem("accessToken", loginData.acces..

북마크 구현하기  북마크 기능을 구현하기 위해서 유저가 게시물에 북마크를 누르면 해당 게시물에 유저 아이디를 담아서 내가 누른 북마크의 데이터를 불러오고이미 눌러진 북마크에 대해선 UI를 북마크 취소로 변경시켜 UX를 향상 시킬 수 있도록 구현하기로 했다  원래 게시물에 유저의 아이디를 담는 형태가 아닌 유저에 게시물을 담는 형태가 일반적이지만캠프에서 제공되는 데이터 베이스에 유저의 정보를 관리하고 있기 때문에 게시물에 담아북마크 데이터를 관리할 수 있도록 이 방법을 사용했다. 게시물 불러오기const fetchPlaces = async () => { try { const response = await axios.get(API_URL); return response.data; } catch..

안녕 오늘은 리덕스를 사용해 React에서 상태 관리를 어떻게 구현하는지 정리했음리덕스는 중앙 집중식 상태 관리를 가능하게 해주고 컴포넌트 간에 상태를 공유할 수 있게 해줌   리덕스 스토어 설정 리덕스로 상태 관리를 하려면 스토어를 먼저 설정함스토어는 애플리케이션의 모든 상태가 저장되는 공간임import { combineReducers, createStore } from "redux";// 1) rootReducer: 여러 리듀서를 합치는 부분 (현재는 빈 객체)const rootReducer = combineReducers({});// 2) store 조합: rootReducer를 기반으로 스토어 생성const store = createStore(rootReducer);// 3) 스토어 exporte..

안녕하세요 오늘은 팀 프로젝트를 진행하면서 구현했던 무한스크롤 방식을 TIL로 작성해보려 합니다무한 스크롤은 꼭 한 번 구현하고 싶었던 기능이었기 때문에 설레는 마음으로 기능을 구현하였습니다.intersectionObserver을 React에서 사용하고 Supabase로 데이터를 받아왔습니다!1. 상태 변수 설정  const [postLoadingMore, setPostLoadingMore] = useState(true); const [displayedPosts, setDisplayedPosts] = useState([]); const [offset, setOffset] = useState(0); const limitLength = 6; postLoadingMore: 추가 데이터가 있는지에 대한 ..

스타일드 컴포넌트는 React에서  CSS-in-JS 스타일링을간편하게 적용할 수 있는 라이브러리인데요 조건부 스타일링을 통해 컴포넌트의 상태나 props에따라 동적으로 스타일을 변경할 수 있슴다  기본적인 조건부 스타일링 예로 들어 버튼의 활성화 상태에 따라 색상을 변경하는 경우 예시 코드와 같이 작성이 가능해요 코드예시import styled from 'styled-components';const Button = styled.button` background: ${props => props.primary ? 'blue' : 'gray'}; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; ..

오늘은 개인과제로 포켓몬 도감을 만들기 시작했습니다홈 화면, 포켓몬 목록을 보여주는 도감 화면까지 스타일드 컴포넌트와React Router Dom 으로 UI 및 페이지 이동을 구현했습니다. App.jsximport React from "react";import Home from "./pages/Home";import Dex from "./pages/Dex";import { BrowserRouter, Routes, Route } from "react-router-dom";import PkmDetail from "./pages/PkmDetail";import "./App.css";const App = () => { return ( } /> }..