728x90 리액트12 [React] Material-UI Popover 위치 보정과 애니메이션 적용 시행착오 기록 이번 글에서는 Material-UI의 Popover 컴포넌트 사용 중 겪었던 시행착오와, 위치 보정 및 자연스러운 애니메이션을 적용하기까지의 해결 과정을 기록합니다.1. 문제 상황처음에는 Material-UI의 Popover를 사용하여 특정 버튼을 클릭하면 팝업이 열리도록 구현하였습니다. 하지만 팝업 내부의 내용이 확장될 때 다음과 같은 문제가 발생했습니다.내용이 확장되면 Popover가 화면 밖으로 벗어나는 현상Popover 위치가 자동으로 보정되지 않아 부자연스러운 UI위치 보정이 되어도 움직임이 너무 딱딱해서 UX가 나쁨2. 처음 시도한 방법 (실패)처음에는 Popover를 Popper로 변경하여 popperRef를 사용해 위치를 직접 업데이트하려고 했습니다. {/* 내용 */} 문제점:기존.. 2025. 3. 14. [React] React Query 사용법 | 데이터 캐싱과 리페칭 쉽게 정리 React Query란?React Query는 React 애플리케이션에서 서버 상태(데이터)를 효율적으로 관리하기 위한 데이터 패칭 라이브러리이다. API로부터 데이터를 가져오고, 캐싱하고, 업데이트하며, 동기화하는 작업을 간편하게 만들어 준다. 서버와 클라이언트 간의 데이터 통신을 효율적으로 관리하여 사용자 경험을 개선할 수 있다.✅ React Query, 왜 사용해야 할까?자동 캐싱과 데이터 동기화데이터를 자동으로 캐싱하고, 필요한 경우에만 서버로부터 데이터를 다시 가져온다.백그라운드에서 데이터를 자동으로 동기화하여 최신 상태를 유지할 수 있다.서버 상태 관리 간소화API 호출, 로딩 상태, 에러 처리 등을 직접 관리할 필요 없이 간편하게 처리할 수 있다.편리한 리페칭(Refetching)특정 조건(.. 2025. 3. 14. [React] React 프로젝트마다 다른 버전 설치해도 괜찮을까? 완벽 정리 📌 React 프로젝트마다 다른 버전 설치해도 괜찮을까?React 프로젝트를 여러 개 작업하다 보면 각 프로젝트에서 다른 React 버전을 사용해야 할 때가 있습니다.그런데, 한 폴더에서 React 17을 쓰고, 다른 폴더에서 React 18을 설치해도 괜찮을까요?결론부터 말하면, 각 프로젝트 폴더마다 React 버전을 다르게 설치해도 문제가 없습니다.✅ React 프로젝트별 버전이 충돌하지 않는 이유각 프로젝트는 독립적인 패키지 환경을 가짐다른 프로젝트의 node_modules/ 폴더와 충돌하지 않음package.json과 package-lock.json을 기반으로 버전이 고정됨🔹 현재 프로젝트에서 사용 중인 React 버전 확인하기터미널에서 해당 프로젝트 폴더로 이동 후 아래 명령어를 실행하세요... 2025. 2. 6. [React] 구조 분해 할당(Destructuring Assignment) 함수에 객체나 배열을 전달해야 할 일이 많음. 하지만 항상 전체 데이터를 사용할 필요는 없고, 일부 값만 필요한 경우도 있음.이럴 때 유용한 게 바로 구조 분해 할당(destructuring assignment). 배열이나 객체에서 원하는 값만 쏙쏙 골라 변수로 저장 가능. 덕분에 코드도 깔끔해지고 가독성도 좋아짐.1. 배열 분해하기배열을 구조 분해 할당하면 특정 요소를 쉽게 변수에 담을 수 있음.let arr = ["Bora", "Lee"];// 구조 분해 할당을 이용한 변수 선언let [firstName, surname] = arr;console.log(firstName); // Boraconsole.log(surname); // Lee위 코드에서 firstName 변수에는 arr[0], surna.. 2025. 2. 5. [React] Context API 특정 함수를 특정 컴포넌트를 거쳐서 원하는 컴포넌트에게 전달하는 작업3~4개 이상의 컴포넌트를 거쳐서 전달을 해야한다면?프로젝트 안에서 전역적으로 사용할 수 있는 값을 관리할 수 있다.여기서 “값”은 상태뿐만 아니라, 함수, 외부 라이브러리 인스턴스, DOM 모두 가능⇒ 리액트의 Context API와 dispatch를 사용하여 이러한 복잡한 구조를 해결해보자Context API 만들어보기React.createContext()const UserDispatch = React.createContext(null);createContext의 파라미터에는 Context의 기본 값을 설정Context를 만들면, 안에 Provider라는 컴포넌트가 들어있는데, 이것을 통하여 Context의 값을 정할 수 있음이 컴포.. 2025. 2. 5. [React] class형 컴포넌트 VS function형 컴포넌트 과거에는 클래스형 컴포넌트를 주로 사용현재는 공식 문서에서 함수형 컴포넌트와 훅을 함께 사용할 것을 권장컴포넌트데이터가 주어졌을 때 이에 맞추어 UI를 만들어주는 기능라이프 사이클 API를 통해 컴포넌트가 화면에 나타날 때, 사라질 때, 변할 때 작업들을 수행Class형 컴포넌트state 기능 및 라이프 사이클 기증을 사용할 수 있고, 임의 메서드를 정의할 수 있다.render함수가 꼭 있어야 한다.Function형 컴포넌트클래스형 컴포넌트보다 선언하기 좀더 편리메모리 자원을 덜 사용한다는 장점과거에는 함수형 컴포넌트에서 state와 라이프 사이클 API를 사용할 수 없었지만, → 리액트 훅이 도입되면서 단점이 해결됨일반적인 함수 선언 방식과 / 화살표 함수(arrow function) 방식 모두 가능화.. 2025. 2. 5. [React] Context Provider, useEffect, useMemo React에서 context provider, useEffect, 그리고 useMemo는 모두 중요한 개념이며 React 애플리케이션을 개발할 때 자주 사용됩니다. 각각의 역할과 사용법에 대해 자세히 설명하겠습니다.Context Provider:역할: Context Provider는 React 컴포넌트 트리 전체에서 데이터를 공유하는 데 사용됩니다. 주로 전역 상태 관리에 활용됩니다.사용법: Context를 생성하고, 해당 컨텍스트의 공급자(Provider)를 사용하여 컴포넌트 트리에 값을 제공합니다. 컴포넌트에서는 해당 컨텍스트의 값을 소비(consume)할 수 있습니다.// 예시: 컨텍스트 생성const MyContext = React.createContext();// 예시: 컨텍스트 공급자 사용fu.. 2025. 2. 5. [React] useLayoutEffect vs useEffect: 언제, 왜 사용하는가? React에서 useEffect와 useLayoutEffect는 비슷해 보이지만 동작 방식에서 중요한 차이가 있음이 차이를 이해하면 UI가 깜빡이는 문제(Flickering) 등을 방지 가능1. 기본 개념 정리 ▶ useEffect비동기적으로 실행됨 (렌더링 후 실행됨)화면이 먼저 업데이트된 후에 실행됨사용자에게 먼저 UI가 보이고 그 후에 실행되는 효과를 적용할 때 사용 ▶ useLayoutEffect동기적으로 실행됨 (렌더링 직후, 화면이 그려지기 전에 실행됨)DOM 업데이트가 적용되기 전에 실행됨UI가 깜빡이는 것을 방지하고 레이아웃이 변경되기 전에 실행해야 할 경우 사용2. 실행 순서 차이 ▶ useEffect 실행 순서컴포넌트가 렌더링됨브라우저가 화면을 업데이트함useEffect 실행됨impor.. 2025. 2. 5. [React] Drawer와 Tab, Accordian - Console 콘솔에러 제거하기 [React] https://hhahee.tistory.com/174 Drawer와 Tab, Accordian으로 FAQ 구현하기2025년 02월 03일Mui의 Accordion 컴포넌트 사용Help Container에서 해당하는 버튼을 선택하면 Drawer가 나오도록 설정Drawer안에는 Tabs를 4가지로 구성각 Tab안에는 Questions의 리스트가 나오도록 하였음questionhhahee.tistory.com위 포스팅에서 초래된 콘솔 에러 해결해보기 모두 정상동작하지만 콘솔의 에러 (경고) 코드를 제거하고 싶었다. 1. FaqsTabs.tsx:84 Warning: Each child in a list should have a unique "key" prop.위의 에러에 나온 84번째 줄은 컴포.. 2025. 2. 4. 이전 1 2 다음 728x90
