ByteCraft

개요useEffect(() => { handleLoad();}, []); 해석:useEffect 내부의 함수 () => { handleLoad(); }는 컴포넌트가 마운트될 때 실행됩니다.**의존성 배열 []**이 비어 있으므로, handleLoad()는 한 번만 실행됩니다.handleLoad()는 사용자가 정의한 함수로, 데이터를 로드하거나 초기화 작업을 수행하는 함수일 가능성이 큽니다.useEffect() 개요useEffect()는 React의 훅(Hook) 중 하나로, 컴포넌트의 라이프사이클 동안 부수 효과(side effects)를 처리할 때 사용됩니다. 1.기본 문법useEffect(() => { // 실행할 코드});→ 컴포넌트가 렌더링될 때마다 실행됨 2.의존성 배열(Dependency ..

개요function ReviewList({ items, onDelete }) { return ( {items.map((item) => { return ( ); })} );}react 학습 중 items.map((item) => { 부분을 이해 하기 위해 .map()을 정리함. Array.prototype.map() 메서드JavaScript에서 배열의 각 요소를 순회하면서 주어진 콜백 함수를 적용한 결과를 새로운 배열로 반환하는 메서드입니다.원본 배열은 변경되지 않습니다. 문법const newArray = arr.map(callback(currentValue, index, array), t..

구조분해할당(Destructuring assignment)은 객체나 배열의 속성 또는 요소를 간단하고 직관적으로 추출하여 변수에 할당할 수 있게 해주는 JavaScript의 문법입니다. 이를 사용하면 코드의 가독성과 효율성을 높일 수 있습니다.1. 배열 구조분해할당배열의 요소를 변수로 쉽게 추출할 수 있습니다.const array = [1, 2, 3];// 구조분해할당const [a, b, c] = array;console.log(a); // 1console.log(b); // 2console.log(c); // 3기본값 설정배열의 값이 없을 경우 기본값을 설정할 수 있습니다.const array = [1];const [a, b = 10] = array;console.log(a); // 1console...

ContextProps DrillingContext.Provider리팩터링useContext구조 재설계와 Context 분리ContextReact Component Tree 전체를 대상으로 Data를 공급하는 기능Props Drilling 문제를 해결하기 위해 Context 사용ContextAPI는 Context를 만들고 다루는 React 기능 - React.createContext() : Context 생성 - MyContext.Provider : Context 배포 - useContext() : //App.jsimport React from "react";import { useMemo, useCallback, useReducer, useRef, useState } from "react";import ..

useCallback은 React Hook 중 하나로, 함수 컴포넌트에서 함수를 메모이제이션하는 데 사용됩니다. 이 Hook은 렌더링 시마다 새로 생성되는 함수를 방지하여 성능을 최적화하는데 도움을 줍니다. 주로 자식 컴포넌트에 함수를 전달할 때 불필요한 렌더링을 방지하는 데 유용합니다.기본 사용법import { useCallback } from 'react';const MyComponent = () => { const handleClick = useCallback(() => { console.log('Button clicked'); }, []); // 빈 배열은 이 함수가 컴포넌트가 마운트될 때 한 번만 생성됨을 의미 return Click me;};의존성 배열useCallback의 두 번째..

React.memo는 React 컴포넌트의 성능 최적화를 위해 사용되는 고차 컴포넌트(Higher-Order Component, HOC)입니다. React.memo는 함수형 컴포넌트를 래핑하여 props가 변경되지 않는 경우 해당 컴포넌트를 다시 렌더링하지 않도록 최적화합니다.사용법import React from 'react';const MyComponent = ({ value }) => { console.log('MyComponent 렌더링'); return {value};};export default React.memo(MyComponent);주요 특징props 변화 감지기본적으로 React.memo는 얕은 비교(Shallow Comparison)를 통해 이전과 새로운 props를 비교합니다.pr..

useMemo는 React에서 제공하는 성능 최적화용 Hook입니다. 컴포넌트가 렌더링될 때 특정 값의 계산을 반복하지 않고, 종속성 배열에 명시된 값들이 변경되었을 때만 재계산되도록 합니다. 이를 통해 불필요한 연산을 방지하고 성능을 향상시킬 수 있습니다.기본 문법const memoizedValue = useMemo(() => { // 계산할 값 반환 return expensiveComputation(a, b);}, [a, b]);주요 특징의존성 배열(Dependencies)의존성 배열에 포함된 값들(a, b)이 변경될 때만 콜백 함수가 실행됩니다.배열이 비어 있으면([]), 처음 렌더링 시에만 계산됩니다.메모이제이션(Memoization)계산된 값을 저장해 두고, 의존성이 변하지 않으면 저장된 값..

구분array.map(callback(currentValue, index, array), thisArg)callback() : 배열 각 요소에 대히 호출되는 함수 - currentValue: 배열의 현재 처리 중인 요소.  - index (선택): 현재 요소의 인덱스.  - array (선택): map()을 호출한 원본 배열.thisArg : 콜백 함수 내부에서 this로 사용할 값. 생략하면 기본적으로 undefined입니다.  Case 1. 2를 곱한 배열을 Returnconst numbers = [1, 2, 3, 4]; const doubled = numbers.map(num => num * 2); console.log(doubled); // [2, 4, 6, 8] Case 2. index를 활용한..