STORAGE/React6 shadcn 사용 중 발생하는 SlotClone 에러 해결 asChild 프랍스를 사용하면 발생하는 에러입니다. 특히 툴팁 컴포넌트 사용 중 자주 발견되는 것 같습니다.Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()? Check the render method of `SlotClone`. at NavLinkButton... 가장 간단한 해결책은 trigger 하위 컴포넌트(주로 버튼)을 `div[role= "button"]` 요소로 감싸주면 됩니다. 그게 싫다면 아래 내용을 계속 읽어보세요.# 문제 발생 코드: dialog trigger 내에 asChild로 NavLinkBut.. 2024. 6. 3. 3. 내장 함수를 통한 성능 최적화 보호되어 있는 글 입니다. 2024. 4. 13. 2-2. 상태 관리 라이브러리(redux, tanstack-query) (3) 상태 관리 도구 1) 클라이언트 측: UI 상태 관리 - 상태 UI 컨트롤 상태: 사용자의 입력, 버튼 활성 여부, 드롭다운 메뉴의 선택 등 UI 레이아웃 상태: 테마 설정, 사이드바 열림/닫힘, 모달 창의 보임/숨김 등 클라이언트 측 캐싱: 사용자 인증 정보, API 호출 결과 등 애플리케이션 로직 상태: 애플리케이션 내부에서 발생하는 이벤트나 사용자 작업에 따른 상태 변화 등 - 도구 종류 redux 구조: 단일 스토어와 단방향 데이터 흐름 Actions: 상태 변경을 요청하기 위해 스토어에 전달하는 데이터 패킷. 이벤트 종류(type)와 추가 데이터(payload)로 구성 Reducers: 액션의 타입에 따라 이전 상태를 기반으로 한 상태 생성하는 순수 함수 Store: 전역 상태 보관소 장.. 2024. 4. 11. 2-1. 상태 관리 개괄 4. 상태 관리 (1) useState, useReducer 1) useState: 컴포넌트 내 간단한 상태 관리 2) useReducer: 컴포넌트 내 상태의 구조와 업데이트 로직이 복잡하거나 이전 상태에 의존적인 경우 상태 관리 함수를 컴포넌트와 분리 redux(2015) vs useReducer(2018) redux의 리듀서 패턴을 컴포넌트 내에서 사용하기 위해 훅으로 만든 것 redux는 전역 상태 관리, useReducer는 로컬 상태 관리 상태 업데이트 로직을 컴포넌트 외부로 분리하고 순수 함수로 상태의 불변성을 유지함(push🚫➜ concat✔) - 사용 과정: dispatch(Action) => reducer(State, Action) => return newState reducer 함수 .. 2024. 4. 11. 1. React와 컴포넌트 1. React 반응: 인터랙티브 웹 어플리케이션(SPA)을 위한 JS 개발 라이브러리 SPA: 클라이언트의 역할 확대, 반응성 향상으로 UX 개선 전통적인 웹 개발: 상태 변화시 매번 서버에서 클라이언트로 HTML 전달, 전체 페이지 새로 렌더링. 서버 부하, 렌더링 비용 크고 화면 깜빡임 현대 웹 개발: 서버는 데이터 전달만 담당. 화면 전환, 비동기 데이터 처리, 상태 관리 모두 클라이언트가 담당 철학: 선언형 프로그래밍 컴포넌트 기반 설계: UI 코드 재사용, 선언형 프로그래밍 Hooks: 로직 코드 재사용, 함수형 컴포넌트에서 상태 관리와 라이프사이클 기능 2. 컴포넌트 JSX를 반환하는 함수. 인터랙티브한 UI를 구성. 상태(state)/속성(props)/컨텍스트(context) 변화시 재실행.. 2024. 4. 3. 이전 1 2 다음
