프로그래밍
-
[라이브러리] React-query프로그래밍 2024. 2. 15. 15:57
📋 개요 비동기 상태 라이브러리를 채택하는 이유 Get Started 페이징 처리 기법 Optimistic Update 구현 ✅ 비동기 라이브러리를 채택하는 이유 1️⃣ 등장 배경 기존의 상태 관리 라이브러리는 클라이언트 상태 작업에 적합하지만 서버 상태는 다르기에 비동기, 서버 상태 작업에 적합한 라이브러리가 필요해졌다. 데이터를 비동기적으로 가져오고, 캐싱, 동기화, 업데이트 관리의 복잡성을 해결하고, 사용자 UI와의 상태를 동기화하는 과정을 보다 쉽고 효율적으로 하기 위해 등장하게 되었다. 2️⃣ React-Query TanStack 팀에서 만든 라이브러리로 데이터 캐싱 및 기능적으로 더 많은 제어가 필요한 경우에 좋다.(기존 React 뿐만아니라 다양한 프레임워크에서 사용이 가능해 TanStack..
-
[React] 고차 컴포넌트 (HOC, High Order Component)프로그래밍/React 2024. 1. 20. 16:09
고차 컴포넌트 하나의 개발 패턴으로 컴포넌트를 인자로 받아서 새로운 컴포넌트로 변환해 반환하는 방식으로 인자로 넘긴 컴포넌트에게 추가되길 원하는 로직을 HOC에서 가지고 있다가 로직이 적용된 엘리멘트를 반환하게 된어 횡단 관심사 문제를 해결하는 역할을 한다. 횡단 관심사란? 대표적인 예시로 인증 & 인가 서비스, 로깅, 트랙젝션 처리, 에러처리 등등이 있으며 계층 분리를 통해서 기능을 분리한다고 하여도 중복된 코드가 생길 수 밖에 없는 경우가 있다 이러한 계층에 상관없이 공통적으로 필요한 관심사가 있는데 이것이 횡단 관심사이다. 즉 어플리케이션 전반에 공통적으로 필요한 문제를 횐단 관심사라고 부를 수 있다. // 이렇게 관심사 분리를 통해서 분리를 해도 공통적으로 필요한 로직이 있는 경우가 있다 언제 사..
-
[Vite] 절대경로 설정프로그래밍/React 2024. 1. 3. 14:14
Vite + Typescript 를 사용한 프로젝트에서 절대경로를 설정하는 방법 tsconfg.json 과 vite.config.json 모두 고쳐줘야한다. >tsconfig.json { "compilerOptions": { "baseUrl": "src", ... "path": { "pages/*": ["pages/*"], "components/*": ["components/*"], } } 아래의 설정을 하지 않아서 경로를 제대로 찾지 못하는 에러가 발생했었음. import { defineConfig } from "vite"; import react from "@vitejs/plugin-react-swc"; // https://vitejs.dev/config/ export default defineCon..
-
[React] useState의 동작원리프로그래밍/React 2023. 12. 16. 11:36
개요 기본개념 useState 동작 원리 헷갈리는 useState 결론 React에서 많이 사용되는 useState 왜 const로 선언이 되고 어떻게 변화를 시키는지 알아보자!! 기본 개념 Functional Component에서 상태) 불변성의 특징을 통해 사용하는 값을 예측 가능하게 만들어준다. 함수의 반환 값으로 컴포넌트가 나타나고 컴포넌트가 가진 값, 클로저 등의 정보는 기본적으로 변하지 않는다. Class Component는 this가 바인딩 된 것, 내부 상태값의 변화 등의 문제로 메서드 실행시점의 값을 예측하는 것이 쉽지 않다. 리랜더링이 필요한 시점에서 새롭게 호출을 하여 새로 만들어버린다. 초기 시점에 불변성을 활용하는 부분에 어려움이 있어 Class Component가 많이 사용되고 ..