Per ardua ad astra.

Dimensions API들어가며리액트 네이티브(React Native)의 내장 API 중 하나인 Dimensions API에 대해 간단히 정리해본다Dimensions API를 이용하여 현재 디바이스의 화면 정보를 가져올 수 있다. Dimensions API개념리액트 네이티브(React Native)에서 기본으로 제공하는 내장 API디바이스의 화면 크기(너비(Width)와 높이(Height)) 정보를 가져오는 데 사용된다.반응형 UI 구성에 활용할 수 있다.이러한 정보를 이용하여 폰트 크기(Font Size), 패딩(Padding), 마진(Margin) 등을 디바이스 화면 크기에 따라 조정할 수 있다. 사용하면 좋은 경우다양한 화면 크기에 맞춰 폰트, 간격, 크기를 조절할 때미디어 쿼리(Media Que..

useSearchParams 훅 (React Router)들어가며리액트 라우터(React Router)에서 제공하는 useSearchParams 훅에 대해 정리해본다. useSearchParams개념리액트 라우터(React Router)를 사용하여 URL의 쿼리 파라미터를 읽고 설정하는 데 유용한 도구이 훅을 사용하면 컴포넌트가 URL의 쿼리 스트링을 쉽게 접근하고 조작할 수 있다.React Router v6에서 도입되었고, 기존의 useLocation과 useHistory 훅을 결합한 기능을 제공한다. 사용법import React from 'react';import { useSearchParams } from 'react-router-dom';function MyComponent() { /..

useFetcher 훅 (React Router)들어가묘리액트 라우터(React Router)에서 제공하는 useFetcher() 훅에 대해 정리해본다. useFetcher개념리액트 라우터(React Router)에서 페이지 전환 없이 데이터 로딩이나 액션을 처리할 수 있게 도와주는 훅(Hook)주로 폼 제출이나 데이터 페칭을 백그라운드에서 처리하고, 사용자에게 시각적 전환 없이 결과를 보여줘야 하는 경우에 사용하면 유용하다. 주요 기능데이터 로딩 및 액션 트리거로딩 상태를 관리하고, 데이터를 비동기적으로 가져오거나 서버에 데이터를 제출할 수 있다.페이지 전환 없음.페이지 전환 없이 데이터를 가져오거나 제출할 수 있으므로, 사용자 경험이 보다 매끄럽다.상태 관리현재 로딩 상태와 로딩 완료 후 데이터를..

useEffect와 useCallback들어가며리액트에서 사용되는 useCallback과 useEffect에 대해 알아보자. useCallback리액트에서 함수를 메모이제이션(Memoization)하는 데 사용된다.불필요한 함수의 재생성을 방지하고, 함수가 의존하는 값이 변경될 때만 새로운 함수를 생성하도록 할 수 있다. 예제 코드아래의 코드에서 handleClick 함수는 count 변수가 변경될 때만 재생성 된다.그렇지 않을 경우 handleClick 함수는 재생성되지 않으며, 같은 함수를 계속 사용하게 된다.이렇게 할 경우 함수의 재생성을 최소화하여 성능 최적화를 하는데 도움을 줄 수 있다.import React, { useCallback, useState } from 'rea..

useReducer 훅들어가며리액트(React.js)에서 사용되는 useReducer 훅에 대해 정리해본다. useReducer 개념컴포넌트에 리듀서(Reducer)를 추가하는 리액트 훅const [state, dispatch] = useReducer(reducer, initialArg, init?)  (참고) 리듀스(Reduce, reduce())배열의 각 요소에 대해 제공된 함수(callback 함수)를 실행하고 하나의 결과값을 반환하는 메서드배열의 각 요소를 누적(Accumulate)하여 단일 값으로 줄이는 역할을 한다.주로 합계, 평균, 최대값, 최소값, 객체 생성 등 다양한 경우에 유용하게 사용된다.const array = [1, 2, 3, 4, 5];const result = a..

훅(Hook)들어가며리액트(React)에서 사용되는 기본적인 훅(Hook)들에 대해 알아보자. 훅(Hook)개념함수 컴포넌트에서 상태(State)나 생명주기 기능 등을 사용할 수 있도록 도와주는 기능클래스 컴포넌트의 기능을 함수 컴포넌트에서도 사용할 수 있게 해준다.가장 널리 사용되는 훅으로는 useState, useEffect, useContext 등이 있다.각각의 훅을 활용하면 함수 컴포넌트에서 상태 관리, 부수 효과 처리, 전역적인 데이터 공유 등을 편리하게 할 수 있다.이 외에도 많은 다양한 훅이 있으며, 직접 커스텀 훅을 만들어 사용할 수도 있다.훅을 사용하면 함수 컴포넌트에서 상태를 관리하고, 생명주기 메서드를 이용할 수 있어 훨씬 간결하고 유연한 코드를 작성할 수 있게 된다. 종류..