설치과정1. node 설치 ⇒ 기본과정이므로 생략2. expo를 global로 설치npm install --global expo-cli 3. watchman 설치brew install watchmanWatchman은 Meta가 만든 File 모니터링 도구4. 어디에서 실행하고 테스트 할 것인가?4-1. XCode를 설치하면 컴퓨터 자체에서 Ios Simulator를 사용할 수 있다.4-2. Android studio를 설치하면 컴퓨터 자체에서 Android Simulator를 사용할 수 있다.4-3. 아이폰 핸드폰에서 expo go 앱을 다운 받아 설치하여해당 폰에서 실행가능4-4. 안드로이드 핸드폰에서 expo go 앱을 다운 받아 설치하여 해당 폰에서 실행가능5. expo init을 파일폴더 생성ex..

리액트 네이티브를 사용하기 위해서 'Expo'와 'React-Native-CLI' 를 사용한다.CLI 와 Expo의 특징React Native CLI 특징기본적으로 네이티브 코드(Android, iOS)를 직접 다뤄야 하기 때문에 설정이 복잡하다.Java, Android Studio, Xcode 등 네이티브 환경 설정이 필요하다.커스터마이징이 자유로워서, 프로젝트에서 네이티브 모듈을 직접 작성하거나, 서드파티 네이티브 모듈을 쉽게 사용할 수 있다.React Native Expo의 특징설치와 초기 설정이 매우 간단하다. expo init 명령어로 바로 프로젝트를 시작할 수 있다네이티브 코드 설정 없이도 앱을 개발할 수 있어서 초보자에게 적합하다Expo 앱을 통해 개발 중인 애플리케이션을 실시간으로 테스트할..

useTransition이란?useTransition은 React 18에서 추가된 기능으로 사용자 인터페이스(UI)에서 느린 업데이트를 처리하는 데 사용되는 훅이다.사용자가 어떤 작업을 수행했을 때, 이 작업이 완료되기 전까지 UI를 즉시 업데이트하는 대신, 이 작업을 '비동기'로 처리하고, 사용자에게 이 작업이 진행 중임을 알려주는 역할을 한다.useTranstion의 형태const [isPending, startTransition] = useTransition();useTransition을 사용하면 UI의 응답성을 높이고, 느린 작업이 전체 UI를 블록하는 것을 방지할 수 있다.코드로 알아보기문제가 되는 코드'use client';import { ChangeEvent, useState } from '..

useDeferredValue는 React 18에서 훅이다.useDefferdValue는 복잡하거나 무거운 렌더링 작업에서 유용하게 사용할 수 있다.useDeferredValue는 값을 지연시켜, 작업동안의 UI의 응답성을 유지할 수 있도록 돕는다.useDeferredValue의 개념useDeferredValue는 값이 즉시 업데이트되지 않아도 될 때 사용된다.예를 들어, 사용자가 텍스트를 입력할 때, 입력된 텍스트를 기반으로 검색 결과를 보여주는 컴포넌트가 있다고 가정했을때, 사용자가 빠르게 타이핑할 때마다 검색 결과를 업데이트하는 것은 불필요한 작업이 된다. 이러한 경우에 useDeferredValue를 사용하여 텍스트 입력에 딜레이를 주어 불필요한 렌더링을 방지한다.코드로 알아보기ResultList..

useId란?useId 는 React18 에서 추가된 기능이다.useId는 react의 고유한 Id를 만들때 사용하는 훅이다.const id = useId();useId로 만든 Id는 form같은 요소에서 접근성 관련으로 사용한다.코드로 알아보기'use client';import { useId } from 'react';const UseIdEx = () => { return ( 이름 );};export default UseIdEx;다음과 같은 코드에서 라벨에 있는 내용을 클릭하면 input값이 선택되는 코드이다.문제가 되는 경우'use client';import { useId } from 'react';const UseIdEx = () => { const id = ..

useReducer 란?useReducer는 useState와 동일하게 state값을 관리하는데 사용한다.다만 useReducer는 여러개의 하위값을 포함하는 state를 관리할때 사용한다.{ username: 'Wonyoung', email: 'wonyoung@example.com', hobbies: ['reading', 'traveling', 'coding'], friends: [ { name: 'Alice', age: 25 }, { name: 'Bob', age: 30 } ], notifications: [ { id: 1, message: 'Welcome to the platform!', read: false }, { id: 2, message: 'Your pro..