![]()
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..
![]()
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..
![]()
Recoil 1. Recoil - Facebook에서 개발한 React 애플리케이션의 상태 관리 라이브러리 - React 애플리케이션에서 상태를 관리 및 공유하는 데 도움을 주는 도구 - 컴포넌트 간에 데이터를 전달하고 업데이트하기위한 간편한 방법을 제공 2. Recoil의 주요 특징 및 개념 - Atoms - Recoil에서 가장 중요한 개념 중 하나 - 애플리케이션의 상태를 나타내는 단위로, 전역적으로 공유되어야 하는 데이터를 저장하는데 사용 - 각 atom은 고유한 키를 가지며, 초기 상태를 가질 수 있음 - Atom은 읽기 및 쓰기 작업을 할 수 있는 상태를 나타냄 - Selectors - atom에서 파생된 값을 계산하고 반환하기 위한 함수 - 다른 atom or 다른 selector를 기반으로..
![]()
every 함수 1. every( ) 함수 - 배열의 모든 요소가 주어진 조건을 만족하는지 확인하고 boolean 값을 반환 - 배열의 모든 요소가 조건을 충족할 때만, 'true'를 반환 - 조건을 만족하지 않는 요소가 있다면 'false'를 반환 2. 예시 // 모든 숫자가 짝수인지 확인 const numbers = [2, 4, 6, 8, 10]; const allEven = numbers.every(number => number % 2 === 0); console.log(allEven); // true // 모든 단어가 'a'로 시작하는지 확인 const words = ['apple', 'banana', 'cherry', 'watermelon']; const allStartWithA = words...
![]()
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,..
![]()
React.memo 1. React.memo - React에서 사용되는 성능 최적화를 위한 기능 - 컴포넌트가 이전에 렌더링한 결과를 기억하고, 동일한 속성(props)로 다시 렌더링될 때, 이전 결과를 재사용할 수 있음 - 부모 컴포넌트가 업데이트되더라도, 컴포넌트의 속성이 변경되지 않았다면, React.memo를 사용해 불필요한 렌더링을 방지하고 성능을 향상시킴 2. 사용방법 import React from 'react'; const MyComponent = React.memo(props => { // 컴포넌트 렌더링 로직 }); export default MyComponent;
![]()
useMemo 1. useMemo - React의 훅 중 하나로, 성능 최적화를 위해 사용 - 계산 비용이 높은 함수 결과를 이전 계산 결과와 비교해, 이전 결과와 동일하다면 이를 재사용하여, 렌더링 성능 향상 2. useMemo 구문 - dependency 들은 이 함수가 의존하는 값들을 나타냄. → 의존성 값들이 변경되었을 때만 다시 실행되고, 그렇지 않으면 계산한 결과를 재사용 const memoizedValue = useMemo(() => { // 계산 비용이 높은 작업 수행 return result; }, [dependency1, dependency2, ...]); 3, 예시 - App.js import React, { useState, useMemo } from "react"; import "..
![]()
useRef 1. useRef - React 라이브러리에서 제공하는 훅(Hook) - 함수형 컴포넌트 내에서 DOM 요소 or 값을 참조할 때, 사용되는 도구 - 이를 통해, 컴포넌트의 렌더링 사이클과는 독립적으로 값을 저장 및 유지 가능 → useState와 달리, 리렌더링을 하지 않고 값을 저장 및 유지함 2. 예시 - RefEx.js import React, { useState, useRef } from "react"; function RefEx() { const formInputNoRef = useRef(null); const [no, setNo] = useState(""); const notice = () => { formInputNoRef.current.focus(); if (!no) { al..
![]()
props 1. props - React 라이브러리를 사용하는 컴포넌트 기반의 웹 애플리케이션에서 사용되는 용어 - React 컴포넌트는 함수 or 클래스 형태로 정의될 수 있으며, 이들은 속성을 받아들일 수 있음 - 이러한 속성들은 컴포넌트 내부에서 사용되어, 컴포넌트의 동작 or 표시 내용을 결정하는데 활용 2. 사용방법 - ProductListItem.js import React, { useState } from "react"; function ProductListItem(props) { // props를 사용하여, 데이터 전달 const imgNo = props.imgNo; const productName = props.name; const productPriceFormatted = props.p..
![]()
JSX 1. JSX (JavaScript XML) - React와 같은 JavaScript 라이브러리를 위해 만들어진 확장 문법 - JavaScript 코드 안에서 XML과 비슷한 형태의 마크업을 작성할 수 있음 2. JSX의 특징 - JavaScript의 확장 문법이기 때문에, JavaScript 코드와 매우 유사 - XML과 비슷한 구조를 가지고 있어, 태그들을 사용하여 컴포넌트를 정의 및 중첩 가능 - JSX 조각을 별도의 변수로 분리 가능 3. 예시 - NumberCounter.js import React, { useState } from "react"; const NumberCounter = () => { const [no, setNo] = useState(0); // 별도의 변수로 분리 con..
![]()
useMemo 1. useMemo - 복잡한 연산 or 계산이 필요한 값을 Memoization하여, 성능을 최적화하는 데 사용 ※ Memoization : 이전에 계산한 값을 저장하여, 동일한 입력이 주어질 때, 다시 계산하는 대신, 저장된 값을 반환 - 특정 값이변경될 때만, 해당 값을 다시 계산하고, 그렇지 않은 경우, 이전에 계산된 값을 재사용할 수 있음 2. 사용방법 const a = useMemo(() => { // 계산하고자 하는 값 or 연산 }, [b]); - [b] : 의존성 목록으로, 이 목록에 포함된 값들이 변경될 때에만 useMemo의 콜백 함수를 실행 ※ 의존성 목록이 변경되지 않으면, 이전에 계산된 값을 재사용함 ※ 의존성 목록 생략 시, useMemo의 콜백 함수는 한 번만 ..
![]()
Reducer 1. Reducer - 상태 관리를 위해 사용 - 복잡한 상태를 가진 컴포넌트에서 상태 업데이트 로직을 분리하여 관리할 수 있음 - 즉, 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수임 2. 사용방법 - ReducerEx.js import React, { useReducer } from "react"; function reducer(state, action) { switch (action.type) { case "INCREMENT": return { value: state.value + 1 }; case "DECREMENT": return { value: state.value - 1 }; default: return state; } } const ReducerE..
![]()
Context 1. Context - React 애플리케이션에서 컴포넌트 간에 데이터를 전달하는 메커니즘 - 중간 컴포넌트를 건너뛰고, 컴포넌트 트리 내에서 데이터를 직접 전달할 수 있음 - 즉, Context는 state를 쉽게 공유할 수 있게 함 2. 사용방법 - ContextEx.js import React, { createContext, useContext } from "react"; // Context를 사용하여, background의 색을 지정 const ThemeContext = createContext("pink"); const ContextEx = () => { const theme = useContext(ThemeContext); const style = { width: "100px",..
![]()
useEffect 1. useEffect - React 라이브러리에서 제공하는 훅(Hook) 중 하나 - 함수형 컴포넌트에서 부작용(side effect)을 처리하기 위해 사용 ※ 여기서 부작용이란? 컴포넌트 외부와의 상호작용을 의미 - useEffect를 사용 시, 컴포넌트가 렌더링되고 난 후, 특정 작업을 수행할 수 있음 - 컴포넌트의 생명주기와 관련된 작업을 처리 ※ 컴포넌트 생명주기 : 컴포넌트가 생성되고 소멸될 때까지의 과정 - useEffect 함수는 두 개의 매개변수를 받음 - 첫 번째 매개변수는 작업을 담은 콜백 함수 (컴포넌트가 렌더링될 때마다 실행됨) - 두 번째 매개변수는 의존성 배열(dependency array)로, 배열에 지정된 값이 변경될 때만 콜백 함수를 실행 2. 사용방법 ..
![]()
useState 1. useState - React 라이브러리에서 제공하는 훅(Hook) 중 하나 ※ 훅(Hook) : 함수형 컴포넌트에서 상태(State) 관리와 기능들을 사용하기 위한 기능을 제공하는 함수 - 함수형 컴포넌트에서도 상태(State)를 관리할 수 있음 - 배열 형태의 반환값을 가지며, 배열의 첫 번째 요소는 현재의 상태 값, 두 번째 요소는 상태 값을 변경할 수 있는 함수 2. 사용법 - Counter.js import React, { useState } from "react"; const Counter = () => { // 변수 선언 const [value, setValue] = useState(0); return ( 현재 카운터 값은 [{value}]입니다. {/* 버튼 클릭 시,..
