Recoil Persist

Recoil Persist 1. Recoil Persist - Recoil 상태 관리 라이브러리와 함께 사용할 수 있는 라이브러리 중 하나 - Recoil 상태를 로컬 스토리지 or 세션 스토리지와 같은 웹 브라우저 저장소에 영속적으로 저장 및 복원하는 기능을 제공 - 이를 통해, 웹 애플리케이션의 상태를 사용자의 브라우저 세션 간에 유지할 수 있음 - Recoil로 관리되는 상태를 브라우저 저장소에 저장하고, 다시 로드하는 기능을 제공해 애플리케이션의 지속성을 개선

• format_list_bulleted Front-End Study/React
• · 2023. 9. 4.
• textsms

atomFamily

atomFamily 1. atomFamily - Recoil에서 제공하는 중요한 개념 중 하나로, 동적으로 생성되는 상태를 처리하는 데 사용 - 동적으로 생성되는 상태에 대한 일반적인 패턴을 쉽게 구현 가능 2. 사용방법 import { atom, atomFamily } from 'recoil'; // atomFamily를 사용하여 동적으로 생성된 상태를 정의 const noAtomFamily = atomFamily({ key: 'noAtomFamily', // 고유한 키를 제공 default: (no) => no, // 상태의 기본값을 설정 }); // atomFamily를 사용하여 여러 상태를 생성 const noAtom1 = noAtomFamily('no1'); const noAtom2 = noAt..

• format_list_bulleted Front-End Study/React
• · 2023. 9. 4.
• textsms

Atoms

Atoms 1. Atoms - Recoil에서 가장 중요한 개념 중 하나 - 애플리케이션의 상태를 나타내는 단위로, 전역적으로 공유되어야 하는 데이터를 저장하는데 사용 - 각 atom은 고유한 키를 가지며, 초기 상태를 가질 수 있음 - Atom은 읽기 및 쓰기 작업을 할 수 있는 상태를 나타냄 2. 예시 - RecoilEx.js import React, { useState } from "react"; import { Button } from "@mui/material"; import { atom, useRecoilState } from "recoil"; const page1NoAtom = atom({ key: "RecoilEx/page1NoAtom", default: 0, }); const page2N..

• format_list_bulleted Front-End Study/React
• · 2023. 9. 1.
• textsms

Recoil

Recoil 1. Recoil - Facebook에서 개발한 React 애플리케이션의 상태 관리 라이브러리 - React 애플리케이션에서 상태를 관리 및 공유하는 데 도움을 주는 도구 - 컴포넌트 간에 데이터를 전달하고 업데이트하기위한 간편한 방법을 제공 2. Recoil의 주요 특징 및 개념 - Atoms - Recoil에서 가장 중요한 개념 중 하나 - 애플리케이션의 상태를 나타내는 단위로, 전역적으로 공유되어야 하는 데이터를 저장하는데 사용 - 각 atom은 고유한 키를 가지며, 초기 상태를 가질 수 있음 - Atom은 읽기 및 쓰기 작업을 할 수 있는 상태를 나타냄 - Selectors - atom에서 파생된 값을 계산하고 반환하기 위한 함수 - 다른 atom or 다른 selector를 기반으로..

• format_list_bulleted Front-End Study/React
• · 2023. 9. 1.
• textsms

useCallback

useCallback 1. useCallback - React의 Hook - 함수 컴포넌트 내에서 함수를 Memoization하고 재사용하기 위해 사용되는 도구 - 불필요한 함수 재생성을 방지하고 성능을 최적화할 수 있음 - 일반적으로 React 컴포넌트 내에서 함수 정의 시, 컴포넌트 리렌더링될 때마다 새로운 함수 인스턴스가 생성 → 이는 성능 저하를 초래하여, 이 문제를 해결하기 위해 useCallback을 사용 → 함수를 캐싱하고 이전에 생성된 함수 인스턴스를 재사용함 2. 예시 - App.js import React, { useState, useCallback } from "react"; import "./App.css"; let SubCallCount = 0; function Sub({ no1,..

• format_list_bulleted Front-End Study/React
• · 2023. 8. 11.
• textsms

React.memo

React.memo 1. React.memo - React에서 사용되는 성능 최적화를 위한 기능 - 컴포넌트가 이전에 렌더링한 결과를 기억하고, 동일한 속성(props)로 다시 렌더링될 때, 이전 결과를 재사용할 수 있음 - 부모 컴포넌트가 업데이트되더라도, 컴포넌트의 속성이 변경되지 않았다면, React.memo를 사용해 불필요한 렌더링을 방지하고 성능을 향상시킴 2. 사용방법 import React from 'react'; const MyComponent = React.memo(props => { // 컴포넌트 렌더링 로직 }); export default MyComponent;

• format_list_bulleted Front-End Study/React
• · 2023. 8. 11.
• textsms