React17 [React] React와 TypeScript로 구현하는 다양한 텍스트 들여쓰기 기법 이번 포스팅에서는 React 컴포넌트를 활용하여 텍스트 들여쓰기 효과를 다양하게 구현하는 방법을 소개합니다.특히, 첫 번째 줄은 18px, 두 번째 줄부터는 36px 들여쓰기가 적용되는 "indentDouble" 타입을 포함한 여러 타입의 구현 예제를 제공하여, UI의 가독성을 높이는 데 도움이 될 것입니다.import React from 'react';import { Box, Typography } from '@material-ui/core';interface FaqAnswer { type: 'br' | 'indent' | 'indentAll' | 'indentDouble' | string; text: string;}// 다중 텍스트 들여쓰기 구현 함수const generateAnswer = (co.. 2025. 2. 11. [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. [React] Drawer와 Tab, Accordian으로 FAQ 구현하기 2025년 02월 03일Mui의 Accordion 컴포넌트 사용Help Container에서 해당하는 버튼을 선택하면 Drawer가 나오도록 설정Drawer안에는 Tabs를 4가지로 구성각 Tab안에는 Questions의 리스트가 나오도록 하였음question은 길이와 expand시 bold체에 따라 한줄~두줄로 설정될 수 있음 → useEffect를 사용하여 expand되는 question 혹은 tab이 바뀔때마다 question의 wrapper라고 할 수 있는 AccordionSummary 컴포넌트의 height을 조정함호버 시, 글자색과 AccordionSummary 배경색상을 변경하여 가시적으로 표현함Question은 선택 시 Accordian 형태로 answer가 dropdown되도록 설정하였음.. 2025. 2. 3. 이전 1 2 다음
