본문 바로가기

TIL

 (95)
TIL - 리액트 라우터 연결 방법: 문제와 해결 오늘은 React와 Supabase를 이용하여 맛집 공유 뉴스 피드 사이트를 구현하는 과정에서 겪었던 고민과 해결 방법에 대해 공유하려고 합니다. 라우팅과 상태 관리에 대해 중점적으로 다룰 것입니다. 프로젝트 구조이 프로젝트는 Single Page Application(SPA)으로, React를 사용하여 구현되었습니다. React Router v6을 이용하여 클라이언트 사이드 라우팅을 관리하고 있으며, Supabase를 통해 데이터를 관리합니다.  문제 정의1. 뉴스 피드 페이지(MainPage)에 세 가지 정렬 버튼이 있습니다: 트렌드, 최신, 팔로우. 이 버튼들을 클릭할 때 기준으로 정렬된 게시물이 표시되기를 원했습니다.2. 사용자가 기본 URL(test.com)에 접속했을 때 리다이렉트되어 트렌딩 ..
TIL - useMemo와 useCallback useMemo와 useCallback은 React에서 성능 최적화를 위해 사용되는 훅입니다. 이 둘은 각각 값을 캐싱하거나 함수를 메모이제이션하여 불필요한 재계산을 방지합니다. useMemo: 이 훅은 계산 비용이 높은 값을 캐싱하고, 해당 값이 필요한 경우에만 다시 계산합니다. 이는 렌더링마다 동일한 계산을 반복하지 않고 성능을 향상시킵니다. 주로 렌더링 시마다 변경되지 않는 값이나 연산 결과를 캐싱하는 데 사용됩니다.예를 들어, 복잡한 계산이나 배열의 필터링, 정렬과 같은 작업을 수행한 결과를 재사용하려는 경우에 useMemo를 사용할 수 있습니다. const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);  useCallbac..
TIL: React, Vite, Redux(RTK), Router를 이용한 SPA 블로그 프로젝트 프로젝트 개요프로젝트 목표:  로그인 기능이 있는 블로그 만들기  로컬 스토리지 활용해 데이터 관리하기  CRUD 기능을 포함한 블로그 시스템 구현하기기술 스택:  React: 프론트엔드 프레임워크  Vite: 빠른 개발 환경 구축  Redux (RTK): 상태 관리  React Router: 클라이언트 사이드 라우팅  Styled-components: 초기 스타일링  Tailwind CSS: 스타일링 연습 (향후 컴포넌트에 적용)  clsx: 조건부 스타일링 (향후 컴포넌트에 적용)구현된 기능로그인 및 회원가입 기능:  로그인 상태에 따라 글쓰기 버튼 및 로그아웃 버튼 표시  모달창을 이용한 회원가입 및 로그인 전환블로그 글쓰기 및 글 목록 표시:  로그인된 상태에서 글 작성 시, 회원 ID와 이름을 ..
TIL - 전역상태관리 (Zustand) 01. 설치하기npm install zustand 02. 사용법import { create } from 'zustand'const useStore = create((set) => ({ count: 1, inc: () => set((state) => ({ count: state.count + 1 })),}))function Counter() { const { count, inc } = useStore() return ( {count} one up )}스토어는 훅입니다. 여기에는 객체, 함수 등 무엇이든 넣을 수 있습니다. 상태는 불변적으로 업데이트되어야 하며, 설정 함수는 이를 돕기 위해 상태를 병합합니다. 03. 유의할 점Fetching everything vs...
TIL - 각 컴포넌트 폴더에 index.js 파일을 두는 이유 오늘은 React 프로젝트에서 Redux Toolkit을 활용하여 모달 컴포넌트 폴더에 index.js 파일을 두는 것이 얼마나 컴포넌트를 효과적으로 관리하는지 학습했습니다. index.js 파일의 정의와 역할index.js 파일은 해당 폴더 내의 파일들을 한 곳에서 import 및 export할 수 있게 해주는 모듈화된 엔트리 포인트입니다.이를 통해 프로젝트 구조를 더 깔끔하고 조직적으로 유지할 수 있습니다. index.js 활용의 주요 장점편리한 모듈화: 여러 모달 컴포넌트를 각각 import할 필요 없이, index.js를 통해 한 번에 import할 수 있습니다. 이렇게 하면 코드 작성 시 import 구문이 간결해지고, 필요한 모달 컴포넌트를 더 쉽게 사용할 수 있습니다.중앙 집중 관리: 모든 ..
TIL - 부모 - 자식 컴포넌트의 리렌더링 오늘은 React에서 부모-자식 컴포넌트의 리렌더링 조건에 대해 수업을 들으면서 블로그를 보고 정리했습니다.  요약부모 컴포넌트가 리렌더링되면 자식 컴포넌트들도 리렌더링된다.자식 컴포넌트란 부모 컴포넌트의 JSX 안에서 형태로 사용된 모든 컴포넌트이다.형제 컴포넌트끼리는 서로 리렌더링에 영향을 미치지 않는다.세부 내용컴포넌트 관계 이해:부모 컴포넌트가 리렌더링되면 그 안의 모든 자식 컴포넌트들도 리렌더링됨.자식 컴포넌트들은 부모 컴포넌트의 JSX 안에 사용된 컴포넌트들이다.형제 관계인 컴포넌트들끼리는 서로 리렌더링에 영향을 미치지 않음.렌더링 관계 트리예시 코드 1const Parent = () => ( );const Child1 = ({ children }) => {ch..
TIL - Form Input - useRef vs useState Form에서 input으로 입력을 받을 때 실시간으로 리렌더링되는 useState와 한 번에 모든 입력 값을 처리하는 useRef를 사용하는 경우 어떤 방법이 더 나은지와 이유를 학습했습니다.useState vs useRefuseState장점:React 상태 관리: 입력 값이 React 상태로 관리되므로, 입력 값이 변경될 때마다 컴포넌트가 리렌더링됩니다. 이를 통해 입력 값에 따라 즉각적으로 UI를 업데이트하거나 유효성 검사를 수행할 수 있습니다.제어 컴포넌트: 제어 컴포넌트를 사용하면 입력 값의 변경을 쉽게 추적하고, 이를 기반으로 다양한 로직을 추가할 수 있습니다. 예를 들어, 입력 값에 따라 버튼을 활성화하거나 비활성화할 수 있습니다.동기화: 입력 값과 상태가 항상 동기화되어 있기 때문에, 다른 ..
React - Debounce 적용하기 TIL - React와 Redux를 사용한 메모 앱 구현오늘은 Mac 기본 메모 앱을 참고하여 React와 Redux를 사용한 메모 앱을 구현했습니다. 주요 기능은 다음과 같습니다메모의 CRUD 기능: 메모 추가(Create), 삭제(Delete), 수정(Update), 선택(Read) 기능메모 항fe-jogha.tistory.com 위에 있는 메모 앱은 오른쪽 섹션에서 메모를 수정하면 왼쪽에 있는 리스트 항목의 제목이 연결되어 있어  같이 수정되는 애플리케이션 입니다.  이미지에 첨부된 메모 앱은 가벼운 사이트라서 리렌더링이 되도 문제가 없지만 무거운 사이트일 경우 불필요한 요청을 줄여 성능을 향상시키기 위해 사용되는 방법중 하나가 Debounce 입니다. Debounce란?Debounce는 사용자의 ..

티스토리툴바