Per ardua ad astra.

react-toastify 라이브러리들어가며간단하게 토스트(Toast) 메시지를 띄워야할 때 @react-toastify@ 라이브러리를 사용할 수 있다.@react-toastify@ 라이브러리의 사용법을 간단하게 정리해본다. react-toastify 라이브러리개념리액트 애플리케이션에서 사용자에게 알림을 제공하는 토스트 메시지(Notification)를 쉽게 구현할 수 있게 해주는 라이브러리이 라이브러리를 사용하여 다양한 스타일과 애니메이션 효과로 간단하게 알림을 띄울 수 있다.기본적으로 설정이 간편하며, 다양한 사용자 정의 옵션을 제공하여 알림을 원하는 대로 커스터마이징할 수 있다. 라이브러리 설치$ npm install react-toastify # yarn add react-toastify 사..

uuid, nanoid 라이브러리 사용하기 (key)들어가며다음과 같이 @map@을 이용하여 요소를 하나하나씩 표현할 경우 @key@ 값을 지정해야 하는데 어떤값을 @key@ 값으로 지정해야할 지 모를 경우가 많다.이때, @uuid@ 또는 @nanoid@ 라이브러리를 이용하면 이 고민을 해결할 수 있다.import { data } from './data.js';export default const App = () => { return ( {data.map((item) => {item.content}} )}  uuid 라이브러리개념@uuid@는 Universally Unique Identifier 의 약자로, 전 세계에서 고유한 값을 생성할 수 있는 식별자이다.@u..

로컬 스토리지(LocalStorage)에 내용을 저장하고, 전역 상태 관리 라이브러리(Redux)와 동기화 하는 방법들어가며리액트(React.js)에서 특정 변수를 로컬 스토리지(Local Storage)에 저장하고, 전역 상태 관리 라이브러리(Redux)와 동기화 시키는 방법을 정리해본다.이렇게 함으로써, 사용자의 입력을 받아 특정 변수를 화면에 표시해줘야 할 경우 새로고침을 해도 동일한 내용이 표시되게 할 수 있다. 로컬 스토리지(Local Storage)개념브라우저에 데이터를 영구적으로 저장할 수 있는 방법브라우저가 닫혀도 데이터가 유지되며, 도메인별로 구분되어 저장된다.로컬 스토리지는 키-값(Key-Value) 형식으로 데이터를 저장하며, 데이터는 문자열 형식으로만 저장할 수 있다.따라서 객체(O..

컴포넌트를 생성하는 방법 2가지 (JSX, React.createElement)들어가며리액트(React.js)에서 컴포넌트를 생성하는 방법 2가지를 정리해본다. 컴포넌트 생성 방법① 함수형 컴포넌트function Greeting() { return ( hello world );} 함수형 컴포넌트는 자바스크립트 함수로 정의되며, JSX(JavaScript XML) 문법을 사용하여 UI를 반환한다.@@와 @@ 태그를 사용하여 UI를 정의한다.JSX는 Babel 같은 컴파일러를 통해 @React.createElement@ 호출로 변환된다.코드가 더 직관적이고 읽기 쉬우며, 컴포넌트를 작성할 때 HTML과 유사한 문법을 사용할 수 있다. ② @React.createElement@imp..

리액트 스니펫(Snippet) 정리들어가며비주얼 스튜디오 코드(VS Code)의 리액트(React.js) 스니펫 확장(ES7+ React/Redux/React-Native snippets)을 설치한 후 사용할 수 있는 스니펫들을 정리해본다.  스니펫(Snippet)프로그래밍에서 자주 사용되는 코드 조각이나 템플릿일반적으로 반복적으로 작성해야 하는 코드를 빠르고 효율적으로 생성할 수 있도록 도와주는 기능 VS Code 확장 설치리액트 스니펫을 VS Code에서 사용하려면, 아래의 확장 프로그램을 설치해줘야 한다.ES7+ React/Redux/React-Native snippets ES7+ React/Redux/React-Native snippets - Visual Studio MarketplaceExten..

Create React App과 Vite들어가며리액트(React.js) 애플리케이션을 빠르게 설정하고 개발할 수 있게 해주는 툴인 Create React App과 Vite에 대해 정리해본다.Create React App(CRA)개념페이스북(메타)에서 개발한 리액트 공식 애플리케이션 설정 도구리액트로 새 프로젝트를 시작할 때 필요한 모든 설정을 자동으로 해주기 때문에, 개발자는 코드 작성에 집중할 수 있다. 특징Zero Configuration복잡한 설정 없이 바로 사용할 수 있다.프로젝트 설정, 빌드 도구(웹팩 등), Babel 설정 등을 기본으로 제공하여, 개발자가 직접 설정할 필요가 없다.Out-of-the-box기본적인 리액트 개발 환경을 갖추고 있다.ESLint, Jest, Service Work..

함수형 업데이트와 직접 참조 업데이트들어가며리액트(React.js)에서 상태(Status)를 업데이트할 때, 함수형 업데이트 방법과 직접 참조 업데이트 방법의 차이에 대해 정리해본다. 함수형 업데이트(Functional Update)setPosts((prevPosts) => [postData, ...prevPosts])상태 업데이트가 이전 상태를 기반으로 이루어진다.함수형 업데이트를 사용할 경우, 다음과 같은 장점이 있다.장점설명안전성- 리액트의 상태 업데이트는 비동기적으로 이루어지기 때문에, 여러 상태 업데이트가 동시에 발생할 수 있다.- 이때, 함수형 업데이트 형태를 사용하면 최신 상태 값을 보장할 수 있다.- @prevPosts@는 항상 현재 상태의 최신 스냅샷을 제공한다.동시성 처리- 상태 업데이..

조건부 렌더링 방법 정리들어가며리액트(React.js)에서의 조건부 렌더링 방법을 정리해본다. 조건부 렌더링(Conditional Rendering)개념특정한 조건에 따라 UI의 일부를 보여주거나 숨기는 방법 방법① 조건부 연산자 / 삼항 연산자(? :)조건부 렌더링을 쉽게 구현할 수 있는 방법조건이 참일 때는 특정 컴포넌트를 렌더링하고, 거짓일 때는 다른 컴포넌트를 렌더링하거나 아무 것도 렌더링하지 않게 할 수 있다.function Example({ isVisible }) { return ( {isVisible ? 이 내용은 보입니다! : 이 내용은 보이지 않습니다!} );} ② 논리 연산자(&&)논리 @&&@ 연산자를 사용하여 조건이 참일 때만 렌더링하도록 할 수 있다.조건..

Compound Component 패턴들어가며리액트(React.js)에서 자주 사용되는 디자인 패턴(Design Pattern) 중 하나인 Compound Component 패턴에 대해 정리해본다. Compound Component 패턴개념서로 관련된 여러 개의 컴포넌트를 하나의 부모 컴포넌트 안에 캡슐화하는 방식컴파운드 컴포넌트의 주요 아이디어는 사용자 인터페이스(UI)를 구성하는 여러 작은 컴포넌트를 하나의 상위 컴포넌트 안에서 조합하여 더 복잡한 UI를 만드는 것이다. Coompound Component 패턴의 적용 예 : @ - @ Option 1 Option 2 Option 3 Option 4 장점동일한 컴포넌트를 다양한 방식으로 재사용할 수 있다.컴포넌트의 내부 구조를 변..

Framer Motion 라이브러리들어가며Framer Motion 라이브러리에 대해 정리해본다. Framer Motion개념인터랙티브 웹 애니메이션과 UI 디자인을 쉽게 구현할 수 있도록 도와주는 라이브러리리액트 프레임워크와 함께 사용되며, 프론트엔드 개발자가 애니메이션을 더 직관적이고 효율적으로 만들 수 있게 도와준다.강력한 API를 제공하여 복잡한 애니메이션을 쉽게 작성할 수 있게 해주며, 코드 기반의 애니메이션을 만들 때 생산성을 높여준다. 설치$ npm install framer-motion # yarn add framer-motion 주요 기능기본적인 모션을 쉽게 적용할 수 있다.위치, 크기, 불투명도 등의 속성을 애니메이션화할 수 있다.드래그와 같은 인터랙션을 손쉽게 구현할 수 있다.예를..

Suspense 컴포넌트들어가며리액트(React.js)에서 사용되는 @Suspense@ 컴포넌트에 대해 정리해본다. Suspense 컴포넌트개념애플리케이션의 비동기 데이터를 쉽게 관리하고 사용자 경험을 개선하기 위해 도입된 기능주로 데이터 로딩 상태를 처리하는데 사용된다.이 컴포넌트를 사용하여 비동기 데이터가 로딩될 때 사용자에게 로딩 스피너(Spinner)나 대체 컨텐츠를 보여줄 수 있다. 사용법@Suspense@ 컴포넌트는 주로 다른 비동기 컴포넌트를 감싸는 용도로 사용된다.@Suspense@는 @fallback@ 이라는 프로퍼티를 통해 로딩 중에 보여줄 컨텐츠를 지정할 수 있다.Loading...}>   사용 시 주의할 점@Suspense@는 클라이언트 측 렌더링에서 동작한다.서버 사이드 렌더링에..

낙관적 업데이트(Optimistic Updates) (React Query)들어가며리액트 쿼리(React Query)에서 사용되는 낙관적 업데이트(Optimistic Updates)에 대하여 정리해본다. 낙관적 업데이트(Optimistic Updating)개념데이터가 실제 서버에 반영되기 전에 미리 UI에 반영하여 사용자 경험(UX)을 향상시키는 기법사용자가 서버 응답을 기다리지 않고도 즉각적인 피드백을 받을 수 있게 해준다. 주요 단계① 변경 전 상태 저장낙관적 업데이트를 수행하기 전에, 현재 상태를 저장한다.이 작업은 서버 요청이 실패했을 경우 원래 상태로 롤백(Rollback)하기 위해 필요하다. ② 낙관적 상태 업데이트서버에 데이터를 전송하기 전에, 리액트 쿼리의 @queryClient.setQu..

리액트 쿼리(Tanstack Query, React Query)들어가며React Query라고 불린 Tanstack Query 라이브러리에 대해 정리해본다.Tanstack Query(React Query)개념리액트 애플리케이션에서 서버 상태(데이터)를 쉽게 관리하고 조작할 수 있도록 도와주는 라이브러리React Query가 2022년 초에 Tanstack Query로 이름이 변경되었다.React Query가 포함된 Tanstack 생태계를 확장하고, 다양한 프레임워크와 플랫폼에서 사용할 수 있는 범용 데이터 페칭 및 상태 관리 라이브러리를 목표로 하기 위해서 였다고 한다.Tanstack Query는 이제 React뿐만 아니라 Vue, Svelte, Solid와 같은 다른 프레임워크에 대한 지원도 포함하고..

지연 로딩(Lazy Loading)들어가며리액트(React.js)에서 애플리케이션을 배포하기 전에 코드 최적화 작업을 해주어야 하는데, 이때 지연 로딩(Lazy Loading)을 활용할 수 있다.지연 로딩(Lazy Loading)이 무엇인지 간단히 정리해본다. 지연 로딩(Lazy Loading)개념필요한 시점에 특정 컴포넌트나 모듈을 로드하여 초기 로딩 시간을 줄이고 애플리케이션의 성능을 향상시키는 기술이 방법을 사용하면 초기 로딩 시 불필요한 코드가 로드되지 않으며, 사용자 경험을 개선할 수 있다.  기본적인 사용 방법@React.lazy@와 @Suspense@를 사용하면 컴포넌트를 동적으로 @import@하고 로딩이 완료될 때까지 대체 UI(fallback)를 표시할 수 있다. ① 컴포넌트 동적 im..

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() { /..

defer() (React Router)들어가며리액트 라우터(React Router)에서 제공하는 @defer()@에 대해 정리해본다. defer()개념리액트 라우터(React Router)에서 제공하는 기능데이터를 모두 불러오기 전에 페이지 일부를 먼저 렌더링하고, 데이터가 도착하면 나머지 부분을 렌더링할 수 있도록 해준다.페이지 로딩 속도를 향상시키고, 사용자 경험(UX)을 개선하는 데 도움을 준다. 주요 특징비동기 데이터 로딩@defer@는 비동기 데이터 로딩을 처리하는 데 사용된다.데이터를 가져오는 동안 일부 페이지 콘텐츠를 먼저 렌더링하고, 데이터가 도착하면 나머지 콘텐츠를 렌더링한다.빠른 페이지 렌더링모든 데이터를 기다리지 않고도 페이지 일부를 즉시 렌더링할 수 있어 페이지 로딩 시간을 단축한..

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

json() 유틸리티 함수 (React Router)들어가며리액트 라우터(React Router)에서 제공하는 @json()@ 유틸리티 함수에 대해 정리해본다. json()개념리액트 라우터(React Router)에서 제공하는 함수React Router v6.4에서 추가된 유틸리티 함수주로 라우터 핸들러에서 사용되며, JSON 형식의 데이터를 응답(Response)으로 반환한다. 특징자동 설정된 Content-Type@json()@ 함수는 반환된 응답의 @Content-Type@ 헤더를 @application/json@으로 자동으로 설정한다.간편한 사용JSON 형식의 데이터를 반환하는데 필요한 코드를 간소화하여, 개발자가 보다 직관적이고 간편하게 사용할 수 있게 한다.상태(Status) 코드 설정 가능@..

useRouterError 훅들어가며리액트 라우터(React Router)의 @useRouterError@ 훅에 대해 정리해본다. useRouterError 훅개념리액트 라우터 라이브러리(@react-router-dom@)에서 제공하는 훅라우트 처리 중 발생한 에러를 잡아서 처리하는 데 사용된다.주로 오류 경계(Error Boundary)와 함께 사용되어, 라우트 내에서 발생하는 오류를 처리하고 사용자에게 적절한 피드백을 제공하는데 사용된다. 주요 기능오류 감지: 라우트 컴포넌트에서 발생하는 오류를 감지할 수 있다.에러 핸들링: 감지된 오류를 사용자 정의 에러 메시지나 컴포넌트로 렌더링할 수 있다.오류 정보 제공: 오류 객체를 반환하여 오류 메시지, 스택 트레이스 등을 활용할 수 있다. 사용 예제예제 1..

React Router의 loader 속성들어가며리액트 라우터(@react-router-dom@)의 @loader@ 속성에 대해 정리해본다. React Router의 @loader@ 속성React Router Version 6 부터 사용할 수 있다.컴포넌트가 랜더링되기 전에 데이터를 가져올 수 있다.로더 함수에서 반환된 데이터는 자동으로 해당 컴포넌트에서 사용할 수 있게 된다.로더는 함수로 정의되며, 해당 함수에서 데이터를 가져와 컴포넌트에 전달한다.로더 함수를 사용하면 컴포넌트가 렌더링되기 전에 데이터를 가져올 수 있어, 컴포넌트가 초기 로딩 상태를 표시하지 않고 바로 데이터를 렌더링할 수 있다.따라서 더 나은 사용자 경험을 제공할 수 있다. 예제 코드import { RouterProvider, cre..

라우터 설정 방법 (React Route)들어가며React Router(@react-router-dom@)을 이용하여 라우터를 설정하는 방법을 정리해본다. 방법패키지 설치하기@react-router-dom@ 패키지를 설치하려면 터미널에 아래 명령을 실행한다.$ npm install react-router-dom # yarn add react-router-dom 방법 1@createBrowserRouter@를 이용하는 방법이다.import { createBrowserRouter, RouterProvider,} from "react-router-dom";import HomePage from "./pages/Home";import ProductsPage from "./pages/Products";co..

리액트에서의 상태 관리 방법리액트(React)에서 상태 관리 방법에 대해 알아보자.리액트에서는 상태 관리를 위해 여러 가지 방법을 사용할 수 있으며, 상황에 따라 적절한 방법을 선택하는 것이 중요하다. 상태 관리 방법1. 지역 상태(Local State)리액트의 useState 훅을 사용하여 컴포넌트 내부에서 상태를 관리할 수 있다.작은 규모의 애플리케이션이나 단일 컴포넌트에서 상태 관리가 필요한 경우 적합하다.import React, { useState } from 'react';function Counter() { const [count, setCount] = useState(0); return ( You clicked {count} times setCount(count..

요소에서 제출(Submit) 버튼 사용 시 기본 동작 막는 방법들어가며@@ 요소 안에 @type@이 @submit@인 버튼을 두고, 클릭할 때, 폼 제출 효과가 발생한다.해당 버튼을 클릭할 때 폼 데이터가 서버로 전송되면서 페이지가 새로고침 되는데, 이것은 폼의 기본 동작이다. // ... 제출 이때 폼 제출 효과 막을 수 있는 방법을 정리해본다. 방법방법 1 : @@ 요소의 @type@ 속성을 @button@으로 지정하기@@ 요소의 @type@ 속성을 @submit@이 아닌 @button@으로 지정하는 방법이다.function handleSubmit() { console.log("Submitted!");} 로그인  방법 2 : @@ 요소의 @onClick@ 이벤트 함수에 @event...

memo() 사용할 때 주의할 점들어가며리액트(React.js)의 @memo()@를 사용할 때 주의할 점을 정리해본다. memo()개념함수형 컴포넌트를 메모이제이션(Memoization)하여 불필요한 리렌더링을 방지하는 역할을 한다.주로 성능 최적화를 위해 사용된다.import { memo } from 'react';const MyComponent = memo(function MyComponent({ prop1, prop2 }) => { // ...});export default MyComponent; 기본적으로 컴포넌트의 @props@가 변경되지 않으면 컴포넌트를 다시 렌더링하지 않는다.@props@의 얕은 비교(Shallow Comparison)를 통해 이루어진다.얕은 비교는 기본 자료형(숫자, 문..

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..

map 함수를 사용할 때 중괄호({})와 소괄호(())들어가며리액트(React)에서 중괄호 @{}@와 소괄호 @()@는 주로 JSX 안에서 사용되며, 특히 @map()@ 메서드와 함께 사용될 때 주의해야 할 점이 몇가지 있다.@map@ 함수를 사용할 때 중괄호(@{}@)와 소괄호(@()@)를 사용하는 경우의 차이에 대해 알아보자. 중괄호(@{}@)자바스크립트 표현식(Expression)을 감싸기 위해 사용된다.중괄호를 사용할 때는 반드시 반환값이 있어야 하며, 명시적으로 @return@ 키워드를 사용해서 값을 반환해야 한다.여러 줄의 코드가 필요하거나 조건문 등 복잡한 로직을 작성해야 할 때 사용한다.const items = ['Apple', 'Banana', 'Cherry'];const listItem..

토스트 메시지 띄우기 간단 예제 (ReactDOM.createPortal)들어가며리액트(React.js)를 이용하여 구현해본 토스트(Toast) 메시지 띄우기 간단 예제 코드를 올려본다.기능을 구현하기 위해 @react-dom@ 패키지의 @createPortal@ 함수를 사용하였다. 코드 App.jsximport React from 'react';import Toast from './Toast';function App() { const [isToastVisible, setIsToastVisible] = React.useState(false); function handleEnrol() { setIsToastVisible(true); setTimeout(() => { setIs..

useImperativeHandle과 forwardRef들어가며리액트(React.js)에서 사용되는 @useImperativeHandle@과 @forwardRef@에 대해 알아보자.@forwardRef@와 @useImperativeHandle@은 컴포넌트 간의 참조를 다루기 위한 도구이다.이 두가지 개념을 이해하면 컴포넌트 외부에서 내부의 DOM 요소나 메서드에 접근할 수 있게 되어, 고급 컴포넌트 설계에 유용하다고 한다. forwardRef개념부모 컴포넌트로부터 전달된 @ref@를 자식 컴포넌트가 받을 수 있게 해준다.@forwardRef@를 사용하지 않고 자식 컴포넌트에 @ref@를 전달할 수 없다.@ref@는 DOM 요소에만 붙일 수 있다.하지만 @forwardRef@를 사용하면, 부모 컴포넌트가 ..

부모 컴포넌트에서 자식 컴포넌트로 요소 넘기는 방법들어가며리액트에서 부모 컴포넌트에서 자식 컴포넌트로 요소를 넘기는 방법을 알아보자. 방법부모 컴포넌트에서 자식 컴포넌트로 넘길 요소의 타입을 지정할 수 있는데, @string@ 형태로 지정해주면 된다.이떄, @prop@ 이름의 첫 글자는 항상 대문자이어야 한다.App.jsx@ButtonsContainer@ @prop@을 @"menu"@로 지정해보았다.return ( handleSelect("components")} > Components handleSelect("jsx")} > JSX ..