리액트 네이티브를 사용하기 위해서 '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..
useLayoutEffect란?useLayoutEffect와 useEffect는 거의 비슷한 역할을 한다.useEffect(() => { //...}, [state]) useLayoutEffect(() => { //...}, [state]) 구조도 비슷하고 기능도 비슷한데 다른점은 effect가 실행되는 시점이다.useEffect의 경우 화면이 업데이트된 이후에 effect가 실행된다.useLayoutEffect는 effect 실행 이후에 화면이 업데이트가 된다.useLayoutEffect를 통해 생기는 이점은 effect를 먼저 실행하기 때문에 사용자가 보는 UI를 보다 정교하게 보일 수 있다.코드로 알아보기'use client';import { useEffect, useLayoutEffec..
