Ch.Covelope

React Reconciliation - 리액트 리컨실리에이션(재조정)1. React Reconciliation 개념 및 동작 과정1.1. 정의Reconciliation은 리액트가 UI를 효율적으로 업데이트하는데 사용하는 핵심 과정으로, state/props가 변경될 때 새로운 Virtual DOM 트리를 생성하여 (실제 컴포넌트 인스턴스가 아닌 가상의 React Element 트리(Virtual DOM)) 이전 트리와 비교하여 변경된 부분만 DOM에 반영합니다.1.2. 주요 알고리즘 - DiffingReact는 O(n³) 복잡도의 완벽한 트리 비교 대신, 두 가지 가정을 기반으로 O(n) 휴리스틱 알고리즘을 사용합니다:가정 1: 다른 타입의 엘리먼트는 다른 트리를 생성한다가정 2: 개발자가 key pr..

React의 실제 내부 구현으로 이해하는 useRefReact의 실제 내부 코드를 통해 useRef가 어떻게 동작하는지 설명해드리겠습니다. 많은 예시 대신 실제 구현부를 바탕으로 핵심 원리를 설명하겠습니다.React 소스 코드에서의 useRef 구현React 실제 구현 코드를 보면, useRef는 다음과 같이 구현되어 있습니다(약간 단순화했습니다):// React 패키지 내 ReactHooks.js 파일export function useRef(initialValue) { const dispatcher = resolveDispatcher(); return dispatcher.useRef(initialValue);}// ReactFiberHooks.js 파일 내 구현function mountRef(ini..

React의 useRef: 언제, 왜 사용하는가?React를 사용하다 보면 다양한 훅(Hook)들을 만나게 됩니다. 그중에서도 useRef는 종종 오해되거나 제대로 활용되지 못하는 훅 중 하나입니다. 이번 포스트에서는 useRef가 무엇인지, 언제 사용해야 하는지, 그리고 왜 사용하는지에 대해 자세히 알아보겠습니다.useRef란 무엇인가?useRef는 React 16.8에서 도입된 훅으로, 렌더링에 필요하지 않은 값을 참조할 수 있게 해주는 기능입니다. useRef가 반환하는 객체는 컴포넌트의 전체 생애주기 동안 유지되며, 이 객체의 .current 속성을 통해 저장된 값에 접근하거나 수정할 수 있습니다.import { useRef } from 'react';function MyComponent() { ..

TanStack Query 시작하기 , Tanstack Query를 사용하는 이유를 설명해 주세요 왜 TanStack Query를 사용해야 하는지? 프론트엔드 개발에서 서버 데이터와의 동기화, 캐싱, 에러 처리, 로딩 상태 관리… 이 모든 것을 직접 구현하려다 보면 코드가 복잡해지고, 버그도 늘어나기 쉽습니다.이럴때 필요한 것이 바로 TanStack Queryt(구 React Query) 입니다.클라인언트 상태, 서버 상태 , 데이터 패칭, 캐싱, 동기화 , 리트라이 , 뮤테이션까지 한번에 해결가능한 tanStack Query 에 대해서 알아보도록 하겠습니다. 목차TanStack Query란?TanStack Query가 필요한 이유: 전통적 상태 관리와의 비교실전 예제로 배우는 TanStack Query..

React에서 데이터 로딩 상태 관리: useEffect vs Suspense 들어가며: 로딩 상태 - 평범하지만 까다로운 문제React에서 로딩 상태를 관리하는 방법은 크게 두 가지로 나뉩니다: 전통적인 방식인 useEffect를 사용하는 방법과 Suspense를 활용하는 방법이죠. 오늘은 이 두 가지 접근법의 차이점을 깊이 있게 살펴보면서, 어떤 상황에서 어떤 방법을 선택해야 할지 함께 알아보겠습니다.목차useEffect로 로딩 상태 관리하기Suspense란 무엇인가?useEffect vs Suspense: 코드 구조 비교실전 예제: 두 방식으로 데이터 페칭 구현하기워터폴(Waterfall) 문제와 해결책트러블슈팅: 자주 발생하는 문제와 해결 방법베스트 프랙티스: 어떤 상황에서 어떤 방식을 선택해야 ..

React(리액트) 데이터 흐름: Props 드릴링부터  상태 관리 까지3년전 작성했던 : 부모 -> 자식에게 함수 전달(props 전달) -> 자식 -> 부모에게 상태 전달 (state lifting) 에 관한 글에 대한 좀더 추가된 내용으로 작성한 글 입니다.📚 목차소개: 리액트의 데이터 흐름Props 드릴링: 이해와 활용State Lifting: 상태 끌어올리기Props 드릴링과 State Lifting의 한계상태 관리 기법핵심정리소개: 리액트의 데이터 흐름리액트는 단방향 데이터 흐름(Unidirectional Data Flow)을 따릅니다. 이 개념은 리액트를 처음 접하는 많은 개발자에게 생소하면서도 핵심적인 부분입니다. 그렇다면 이 데이터 흐름이 실제로 어떻게 작동하는지 살펴보겠습니다.리액트의..

목차소개실행 순서와 타이밍useEffect 심층 이해useLayoutEffect 심층 이해실제 사용 사례성능 고려사항트러블슈팅요약 및 결론소개리액트를 사용하면서 사이드 이펙트를 처리하는 방법으로 가장 먼저 접하게 되는 훅은 useEffect입니다. 그런데 useLayoutEffect라는 비슷해 보이는 훅도 존재합니다. 이름만 봐도 둘은 분명 유사한 목적을 가지고 있지만, 실제로는 중요한 차이가 있습니다.오늘은 이 두 훅의 차이점을 정확히 이해하고, 각각 언제 사용해야 하는지를 명확하게 알아보겠습니다. 프론트엔드 개발자로서 이 차이를 제대로 이해하면 UI 렌더링 관련 버그를 방지하고, 애플리케이션 성능을 최적화하는 데 큰 도움이 됩니다.실행 순서와 타이밍두 훅의 가장 핵심적인 차이는 실행 타이밍입니다. 리..

TypeScript로 견고한 코드 작성하기: 타입의 힘을 활용한 모던 개발 가이드1. TypeScript란 무엇인가?1.1 TypeScript의 탄생 배경과 역사JavaScript는 웹 개발의 핵심 언어로 자리잡았지만, 대규모 애플리케이션 개발에서 여러 한계점을 보였습니다. 이러한 문제들을 해결하기 위해 Microsoft의 Anders Hejlsberg(C# 설계자)가 주도하여 2012년 TypeScript를 개발했습니다.이러한 문제를 해결하기 위해 Microsoft는 2012년 TypeScript를 발표했습니다.타입 시스템의 부재JavaScript는 동적 타입 언어이기 때문에 런타임에서만 타입 오류를 발견할 수 있었습니다이는 버그 발견이 늦어지고, 코드 품질 관리가 어려워지는 원인이 되었습니다대규모 개..

JavaScript 클로저와 React Hooks의 동작 원리 이해하기프론트엔드 개발을 하다 보면 클로저(Closure)라는 개념을 자주 마주치게 됩니다. 특히 React Hooks를 사용할 때 클로저는 핵심적인 역할을 합니다. 하지만 많은 개발자들이 클로저의 개념을 어렵게 느끼고, React Hooks와의 관계를 명확히 이해하지 못하고 있습니다.이 글에서는 클로저의 기본 개념부터 시작해서, React Hooks가 어떻게 클로저를 활용하는지 상세히 알아보겠습니다.목차클로저란 무엇인가?클로저의 동작 원리클로저가 중요한 이유React에서의 클로저React Hooks와 클로저의 관계실제 사용 사례와 주의점클로저란 무엇인가?클로저는 함수가 자신이 생성될 당시의 환경을 기억하는 현상을 말합니다. 조금 더 전문적으..

리코일(Recoil) ? 리코일은 2020년 Facebook 에서 만든 React 전용 상태 관리 라이브러리 이다. 이전에는 redux, mobx 그리고 React에 context등 다양한 상태관리 툴들이 존재한다. 기존 프로젝트도 redux로 되어있었고 처음 접했을 때는 많은 양에 코드들이 이해를 하는데 어려움을 주었지만 recoil은 이전 상태관리 라이브러리들과 다르게 러닝커브가 높지 않아 편하게 접근했던 거 같다. 리코일은 리액트 문법 친화적이며 get/set 인터페이스로 사용가능한 보일러 플레이트가 없는 API를 사용한다. 미들웨어 없이 비동기 처리가 가능하다 리코일 내부적으로 캐싱을 지원하며 동일한 atom 값에 대한 메모제이션된 값을 사용하여 성능적 이점이 있다. 간단하고 직관적인 API를 사..

리액트에서 함수형 컴포넌트 이전 클래스형 컴포넌트 사용시에는 상태를 지역변수 state에 정의하고 상태를 변경할 메소드 안에 setState 메소드를 넣어서 상태를 변경 했다.그럼 왜 state변수를 직접 변경하지 않고 setState를 통해서 했는지는 해당 메소드를 사용해서 리액트 컴포넌트에 상태변경에 대해서 알려주고 리렌더링을 요청 하기 위해서다.  함수형 컴포넌트 리액트 함수형 컴포넌트에서는 useState 라는 React Hooks를 사용해서 상태를 관리한다.해당 훅은 초기값을 받아서 [state, setState] 의 배열을 반환하며 [상태, 상태 변경 핸들러] 로 보면 된다. 함수형 컴포넌트는 렌더가 필요 할 때마다 함수를 재호출 하는데 렌더링은 곧 함수 호출이다.함수가 재호출 되었을때 이전 ..

react-query 란 React Query는 React 에서 원격 및 비동기 데이터를 관리하기 위한 라이브러리이다. API와 같은 다양한 데이터 소스에서 데이터를 더 쉽게 가져오고, 캐시하고, 동기화하고, 업데이트할 수 있는 일련의 훅 및 유틸리티를 제공한다. 설치 및 설정 NPM $ npm i @tanstack/react-query # or $ pnpm add @tanstack/react-query # or $ yarn add @tanstack/react-query CDN 설치되면 다음과 같이 컴포넌트에서 react-query를 가져와서 사용할 수 있다. import { QueryClient, QueryClientProvider, useQuery } from 'react-query'; const q..

※콘솔로 jsx 찍어보고 궁금증이 생겨서 정리하기 JSX 란 JSX는 별도의 언어가 아니라 개발자가 JavaScript 파일에 HTML과 유사한 코드를 작성할 수 있도록 하는 구문 확장이다. UI 구성 요소를 설명하는 더 읽기 쉽고 표현적인 방법을 제공하므로 코드를 더 쉽게 이해하고 유지 관리할 수 있다. JSX 코드는 HTML처럼 보이지만 실제로는 Babel과 같은 도구에 의해 일반 JavaScript로 변환되는 구문이다. 결과 코드는 UI 구성 요소를 만들고 조작하는 JavaScript 함수 호출 집합이다. JSX 코드는 HTML과 유사한 태그와 JavaScript 표현식을 모두 포함할 수 있으므로 개발자가 동적 데이터를 UI 구성 요소에 쉽게 포함할 수 있다. 콘솔을 찍어보고 생긴 궁금증 배열에 J..

state. - 현재 컴포넌트에 렌더링에 영향을 미치는 객체 형태의 데이터 props. - 상위 컴포넌트에서 하위 컴포넌트로 객체 형태의 데이터를 전달 (읽기 전용) state 또는 props 업데이트 시 리렌더링된다. 리액트(react) 데이터 흐름 리액트는 기본적으로 단방향 데이터 흐름을 지닌다. 일반적으로 상위 컴포넌트에서 가진 데이터를 하위 컴포넌트로 props 객체를 통해서 전달하는데 이를 props drilling 이라고 한다. 하지만 함수를 통해서 하위 컴포넌트의 데이터를 상위 컴포넌트로 전달받아서 사용할 수도 있는데 상태 끌어올리기 state lifting 이라고 부른다. 예제 - 어떻게 전달되고 끌어 올려지는지 만 보면 된다. //App.js import NewExpense from '...

You are running `create-react-app` 5.0.0, which is behind the latest release (5.0.1) 얼마 전에 리액트로 프로젝트 완성 후에 웹의 이론적인 부분하고 타입스크립트 그리고 뷰를 조금 공부하느라 리액트를 안 쓰다가 오랜만에 강의를 보면서 시작하려는데 기본 세팅에서 에러가 발생했다. npx create-react-app my-app 입력후 아래 처럼 에러 메세지가 나왔고 내용은 더 이상 글로벌(전역) 설치를 지원하지 않으니 글로벌 설치를 제거하라는 거였다. You are running `create-react-app` 5.0.0, which is behind the latest release (5.0.1). We no longer support ..