전체 글108 css -> tailwind css padding padding : 1rem;p-4 padding-top : 0.5rem;pt-2 padding-bottom : 2rem;pb-8 padding-left/right : 0.75rem;px-3 ( 좌.우) padding-top/bottom : 1.5rem;py-6 ( 위.아래 ) margin똑같음1rem이 4왼쪽은 l, 위는 t, 아래는 b, 오른쪽은 r, 위아래는 y, 왼우는 x flexbox display:flex;flex display:inline-flex;inline-flex flex-direction : column;flex-col flex-wrap : wrap;flex-wrap align-items : center;items-center align-self : start;self.. 2025. 3. 28. Recoil-Persist Recoil-Persist는 Recoil atom (전역상태)을 브라우저(또는 리액트 네이티브)의 영구저장소(LocalStorage, SessionStorage, AsyncStorage등)에 자동으로 저장 Persist 하고 페이지 리로드 시 저장된 값을 복원 rehydrate 해주는 가벼운 라이브러리이다. - 선택적 Persistence : 특정 atom만 골라서 저장가능- 만료 설정 가능 : 저장 데이터의 TTL ( time to live ) 지정- 타입스크립트 지원 : 제네릭 타입 정의 가능 * 예시 * import React from 'react';import { RecoilRoot, atom, useRecoilState } from 'recoil';import { recoilPersist } f.. 2025. 3. 24. Concurrent Mode(Concurrent Rendering)와 Suspense를 활용해 비동기 UI를 구성하는 방법과, 이 패턴의 장단점은 무엇인가요? Concurrent Mode(Concurrent Rendering)와 Suspense를 활용해 비동기 UI를 구성하는 방법과, 이 패턴의 장단점은 무엇인가요?** Concurrent Mode & Suspense* Concurrent Mode : 리액트 18이상에서 활성화 가능하고, 렌더링을 비동기로 수행하여 UI 차단 없이 업데이트를 처리한다.* Suspense : 비동기 컴포넌트 ( ex : lazy import, data fetch ) 로딩 시 fallback UI를 자동표시import {Suspense, lazy} from 'react';const Profiles = lazy(()=> import ('./Profile'));function App(){ return( Loading Profil.. 2025. 3. 21. React Fiber 아키텍처는 무엇이고, React reconciliation과정에서 어떤 역할을 하는지 설명하세요. React Fiber 아키텍처는 무엇이고, React reconciliation과정에서 어떤 역할을 하는지 설명하세요. 리액트 파이버는 리액트 16부터 도입된 새로운 재조정 reconciliation 엔진이다. 기존 Stack reconciliation방식의 동기적 업데이트를 대체하여, 작업을 작은 단위 fiber로 분할하고 우선 순위에 따라서 비동기적으로 처리할 수 있게 설계되었다. * 동작방식1. Fiber Tree : 각 컴포넌트는 Fiber 노드로 표현된다.2. Work Loop : 렌더링 작업을 여러개의 태스크로 분할한다. 브라우저 이벤트 ( 사용자 입력, 애니메이션 ) 사이에 작업을 일시중단 / 재개 한다.3. Priority Scheduling : 사용자 입력 ( 우선순위 높음 ), 애니메.. 2025. 3. 21. 내부 webview에 값 전달하기 webview를 어플리케이션으로 감싸서 동작하게 하는 경우가 많다. 이 경우에 어플리케이션 외부의 동작 정보를 내부 웹뷰에 반영시켜야 할 때가 있다. 예를 들면, 환경설정이라던지 혹은 웹뷰 내부에 정의한 함수의 실행이라던지.. 어플리케이션 웹뷰 컴포넌트에서의 코드import { Button, StyleSheet, Text, View } from "react-native";import Constants from "expo-constants";import WebView from "react-native-webview";import { useRef, useState } from "react";function WebViewScreen(){ const [hasError, setHasError] = useStat.. 2025. 3. 20. React Native Expo 배포용 빌드 이후 에러 리액트 네이티브 엑스포에서 배포용 빌드 이후에 다시 시뮬레이터에서 어플리케이션을 사용하려고 하면 CommandError: No development build (Bundle Identifier 이름) for this project is installed. Please make and install a development build on the device first. 이렇게 뜨는 경우가 있다. 이 경우에는 npx expo start --go 로 go에서의 빌드를 다시 실행해주면 된다. 2025. 3. 20. npm, package.json, package-lock.json npm initpackage.json 생성npm install npm 모듈 로컬 설치npm install 패키지@버전특정버전 설치npm install --save 패키지이름node_modules 디렉토리에 설치, dependencies 항목에 패키지 추가npm install -g 패키지시스템 전역에 패키지 설치, 해당 프로젝트의 node_modules 디렉토리와 관계 없이 사용가능npm install --save옵션dependencies 항목에 추가가 됨npm install --save-devdevDependencies 항목에 추가가 됨 ** 주의해야npm updatenpm 모듈 업데이트npm dedupe중복된 모듈 정리npm outdated오래된 패키지의 존재 유무를 알려줌npm cachenpm 내의 .. 2025. 3. 18. Batching 배치 리액트는 성능 최적화를 위해서 여러 상태 업데이트를 한번에 처리한다.이벤트 핸들러나 라이프 사이클 내에서 발생하는 상태 업데이트들을 모아서, 한번의 리렌더링으로 처리하면 불필요한 렌더링 횟수를 줄여준다.이를 통해서 앱이 더 부드럽게 동작할 수 있다. * 문제점- 동일한 상태를 여러번 업데이트했을 때, 각 업데이트가 독립적으로 반영되지 않고 배치되어 버리면, 의도한 대로 상태가 변화하지 않을 수 있다. 예를 들어const handleClick = () => { setCount(count + 1); // 현재 count 값 사용 setCount(count + 1); // 여전히 이전 count 값 사용};이런 경우에 count는 +2가 아니라 +1 된다. * 그러면 어떻게 이를 해결할 수 있을까? .. 2025. 3. 18. React 18 ) useTransition 아까 useActionState에 대해서 언급하였는데, 작동이 안되는 경우가 종종 있다. 예를 들어서, isPending 값이 제대로 업데이트 안되는 경우가 존재했다. ( 아무래도 아직 나온지 얼마 안되어서 그런건가? ) * 두가지 반환값이 존재한다. - isPending : 배열을 반환하는데, 첫번 째 값은 업데이트가 진행중인지 나타내는 boolean 값 - startTransition : 비우선 업데이트를 시작하는 함수 * 사용목적예를 들어서, 사용자가 입력하는 동안 목록 필터링처럼 시간이 좀 걸리는 작업이 있다면 이 작업을 startTransiton 안에 넣어서 실행할 수 있다. 그러면 입력반응은 즉시 이뤄지고, 시간이 걸리는 작업은 백그라운드에서 진행되면서 UI가 멈추지 않는다. import.. 2025. 3. 18. React 19 ) useActionState( 구 useFormState ) useFormState는 이전에 React Dom에서 제공했었고 이제는 useActionState로 이름이 바뀌어 제공된다. 목적은 폼의 동작을 쉽게 관리하기 위함이다. useActionState ( 구 useFormState )const [state, formAction, isPending] = useActionState(fn, initialState, permalink?); * 목적- 폼 제출 ( 이걸 액션이라고 한다 ) 을 호출할 때, 이전 상태와 함께 폼 데이터를 인자로 받아 처리한 후, 그 결과 상태를 관리해준다. * 기능- 폼 제출 시 자동으로 pending 상태를 관리한다.- 서버액션 ( 데이터 업데이트, 검증 등 )의 결과를 상태로 반영하여 이후 렌더링에 활용할 수 있다.- 이전 Cana.. 2025. 3. 18. 이전 1 2 3 4 ··· 11 다음