본문 바로가기
반응형

공부

 (111)
[팀 프로젝트] 방콕스타일 - 더보기 기능 구현 더보기 기능 추가 이유 ✨사용자 경험 개선모든 게시물을 한 번에 보여주는 것으로 진행을 했었는데 한 화면에 많은 데이터를 보여주게 되면 사용자가 부담을 느낄 것 같다는 생각을 했습니다. 그래서 `더보기`버튼을 추가해 사용자가 원할 때 더 많은 게시물을 볼 수 있게 하여 가독성을 높였습니다. 구현 📖 화면에 보여주는 데이터보다 전체 데이터가 더 많으면 `더보기`버튼 활성화 하는 방식으로 구현했습니다.// 더보기 클릭 const handleLoadMore = () => { const postDisplay = debounceValue ? filteredSearchTermData(LIMIT_NUMBER, filteredPosts, displayedPosts) : filteredDisp..
useSyncExternalStore 훅 알아보기 useSyncExternalStore 📖`useSyncExternalStore`는 외부 상태 store를 React 컴포넌트와 동기화해 concurrent reading(동시 읽기)를 지원할 수 있도록 하는 React Hook입니다. ❗쉽게 설명하면react가 아닌 외부 저장소 (ex. 바닐라 자바스크립트) 값을 읽어드려 외부 저장소 값의 변화를 추적하고, 동시성 상태 변화에 대응할 수 있습니다. 기본 사용법useSyncExternalStore은 세 가지 인자를 받아서 사용합니다.import { useSyncExternalStore } from 'react';import { todosStore } from './todoStore.js';function TodosApp() { const todos = ..
라이브러리 없이 라우터(Router) 만들기 오늘은 `react-router-dom` 라이브러리 없이 라우터를 만들어보면서 라우팅 시스템에 대해 공부해보려고 합니다. 라우팅 시스템 📖라이브러리 없이 라우팅 시스템을 개발하기 위한 2가지 방법이 있습니다. 첫 번째 Fragment 해시(해시 라우터)를 이용하는 방법과두 번째 history API(브라우저 라우터)를 이용하는 방법이 있습니다. history API는 `pushState``popState`메서드가 지원되면서 Fragment 해시를 쓰지 않고도 라우팅 시스템을 개발할 수 있지만 모든 브라우저에서 지원되는 라우터를 개발하기 위해선 아직까지 Fragment 해시 라우터를 사용해야 합니다. 이 포스팅에선 Fragment 해시를 이용해 라우터 구현 방법에 대해 소개하겠습니다. Fragment 해..
[개인 과제] 포켓몬 도감 회고 개인 과제 소개 📖react, styled-components, context API를 이용한 포켓몬 도감입니다.배포 링크 : https://pokemon-app-sepia-nine.vercel.app/깃허브 주소 : https://github.com/smu06030/pokemon-app 요구 사항 📌필수 구현 사항✅ Git 브랜치 전략 사용 (props-drilling, context)✅ 페이지 라우팅 구현 (react-router-dom)✅ 도감 페이지 구현각 포켓몬 카드의 추가 삭제버튼클릭 시 디테일 페이지 이동✅ 디테일 페이지 구현뒤로 가기 버튼 클릭 시 기존 리스트 유지✅ 알림 기능 구현 (sweetalert2)✅ styled-components 스타일링 사용 기술 🛠️컴포넌트 기반의 구조..
[트러블 슈팅] 포켓몬 도감 (svg, router, 이벤트 버블링) [개인 과제] 포켓몬 도감 회고개인 과제 소개 📖react, styled-components, context API를 이용한 포켓몬 도감입니다.배포 링크 : https://pokemon-app-sepia-nine.vercel.app/깃허브 주소 : https://github.com/smu06030/pokemon-app 요구 사항 📌필수 구현mingos-habitat.tistory.com포켓몬 도감 만들기를 진행하면서 발생한 트러블 슈팅에 대해 정리해 봤습니다!SVG를 JSX 문법으로 컴포넌트화 하는 과정에서 발생한 Invalid DOM property 오류발생한 오류 🔥`HTML` 속성과 React `JSX` 속성 간의 차이 때문에 발생한 오류 해결 과정 🔎HTML과 JSX 속성의 차이 React..
React는 Hooks를 배열로 관리하는 이유 React는 Hooks를 배열(`Linked List`)로 관리하고 있습니다. 이는 Hooks를 관리하고 있는 배열에 index로 접근할 수 있다는 뜻이며, 호출 순서에 의존하고 있다는 뜻입니다. Hooks의 내부 관리 방식 📖Hooks는 `컴포넌트의 최상위 레벨` 또는 커스텀 훅에서만 호출할 수 있습니다. 조건문, 반복문 또는 기타 중첩된 함수 내부에서는 훅을 호출할 수 없습니다. 각각 `useState`의 인자로 초기값을 받아 배열 구조분해 할당으로 state 변수와 state 설정자(setter) 함수를 받고 있습니다.function App() { const [value1, setValue1] = useState(''); const [value2, setValue2] = useState(0);..
React 숙련 4 (react-router-dom) react router dom 📖리액트 프로젝트에서 라우팅을 가능하게 하는 라이브러리입니다. 설치 방법yarn add react-router-dom 사용 방법`About``Works``Home``Contact` 4개의 컴포넌트를 만듭니다. 가장 중요하다고 할 수 있는 부분인데요, 브라우저에서 URL을 입력하고 이동했을 때 원하는 페이지 컴포넌트로 이동하게 만드는 부분입니다.import React from "react";import { BrowserRouter, Route, Routes } from "react-router-dom";import Home from "../pages/Home";import About from "../pages/About";import Contact from "../pages..
React 숙련 3 (Memoization) Memoization 📖리렌더링 발생 조건컴포넌트에서 state가 바뀌었을 때컴포넌트가 내려받은 props가 변경되었을 때부모 컴포넌트가 리렌더링 된 경우 자식 컴포넌트 모두최적화리액트에서 리렌더링이 자주 발생한다면 비용적인 측면에서 좋지 않기 때문에 최적화 작업이 필요합니다. 그래서 대표적인 방법으로 아래 3가지 방법이 있습니다. `React.memo` : 컴포넌트를 캐싱`useMemo` : 값을 캐싱`useCallback` : 함수를 캐싱 React.memo📖 1번 컴포넌트가 리렌더링 될 때 2~7번이 모두 리렌더링 됩니다.4번 컴포넌트가 리렌더링 될 때 6~7번이 모두 리렌더링 됩니다. 이 처럼 자식 컴포넌트에서 바뀐 게 없는데 리렌더링 되는 문제를 `React.memo`로 해결할 수 있습니다...

티스토리툴바