리액트 (4) 썸네일형 리스트형 [React] 리액트 라이브러리 추천 목록(2024 기준) 기존 Ykss 님이 번역하신 글을 표로 정리한 글입니다 실 사용 경험과는 상관 없이 지극히 개인적 취향을 목적으로 정리하였으니,맨 아래 원문을 참고하시길 바랍니다. 구분이름 및 링크비고build toolVite 패키지 매니저pnpm성능적으로 npm 보다 향상된 pnpm기본적이고 가장 널리 사용되는 건 -> npm모노레포가 필요한 경우 -> Turborepo상태관리ZustandApi context 는 최적화시 개발자가 직접 최적화 해야하는번거로움이 있어 Zustand + tanstack Query 로 풀어낸다데이터 페칭 TanStack QueryREST API 또는 GraphQL API라우팅React Router타입스크립트면 TanStack RouterCSSTailwind CSS https://runebo.. [React Design] Compound Pattern (복합 컴포넌트 패턴) 애플리케이션에는 상호 의존적인 컴포넌트가 있는 경우가 많습니다. 이들은 state와 로직을 함께 공유하며 서로 의존하고 있습니다.select, 드롭다운 컴포넌트 또는 메뉴 항목과 같은 컴포넌트에서 이러한 패턴을 자주 볼 수 있습니다. 복합 컴포넌트 패턴을 사용하면 하나의 작업을 수행하기 위해 모두 함께 작동하는 컴포넌트를 만들 수 있습니다. Chakra UI 에서 볼 수 있는 탭1 탭2 내용1 내용2 으로 컴포넌트 이름을 명명하는 게 특징 입니다. Context APIReact.Children.map 이나 React .cloneElement 를 사용할 경우1. React.Children.map의 경우 Wrapper로 감싸면 props 전달이 안되어 컴포넌트 중첩이.. [React] Redux: App-Wide State와 Cross-Component State 관리 가이드 1. Redux 상태 관리의 기본 개념 client state( 웹 브라우저 세션과 관련된 모든 정보) 는 사용 범위에 따라 3가지로 나뉩니다 1. local state 2. cross-component state3. app-wide state 1.1. Local State (지역 상태) 단일 컴포넌트 내에서만 사용되는 상태 useState, useReducer 훅을 사용하여 관리 폼 입력 상태토글 상태 (열기/닫기) UI 상태function Component() { const [isVisible, setIsVisible] = useState(false); // 이 상태는 이 컴포넌트 내에서만 사용됨} 1.2. Cross-Component State (교차 컴포넌트 상태) 여러 컴포넌트 간에 공.. [React] memo useMemo useCallback 차이와 사용 판단법 React에서 제공하는 주요 성능 최적화 Hook들의 특징과 사용법을 알아봅니다. memo컴포넌트 자체를 메모이제이션하여 불필요한 리렌더링을 방지합니다. 컴포넌트가 리렌더링할 때 React는 이것의 모든 자식을 재귀적으로 재렌더링합니다.부모 컴포넌트가 정상적으로 다시 리랜더링 된 후, 자신의 리랜더링 차례가 됬을 때,리랜더링 전후 props를 비교하여 동일하면 (배열이거나 객체이면 얕은 비교만 수행합니다) 리랜더링을 하지 않습니다. 기본 문법const MyComponent = React.memo(function MyComponent(props) { // 컴포넌트 로직});사용 예시import React from 'react';const Counter = ({ count }) => { return {c.. 이전 1 다음
