ByteCraft

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)계산된 값을 저장해 두고, 의존성이 변하지 않으면 저장된 값..

[사전] shorthand : 속기, 약칭정의:JavaScript의 객체 리터럴(Object Literal)에서 키와 값의 이름이 동일할 때, 축약된 형태로 작성할 수 있는 문법입니다.특징:원래는 content: content처럼 키와 값을 명시적으로 작성해야 하지만, Property Shorthand를 사용하면 단순히 content라고만 적어도 됩니다.코드가 간결해지고 가독성이 좋아집니다.예시:const name = "지구별여행자";const age = 30;// Property Shorthand 사용 전const user1 = { name: name, age: age,};// Property Shorthand 사용 후const user2 = { name, age,};console.log(use..

비교특징useStateuseReducer복잡도간단한 상태에 적합복잡한 상태 트랜지션에 적합상태 갱신 방식직접 상태를 업데이트 (setState)액션과 리듀서 함수로 상태 관리코드 구조코드가 짧고 간단리듀서를 별도 정의하여 구조화 가능공유 상태 관리상태 공유가 쉽지 않음Context와 함께 사용해 확장 가능성능단순한 컴포넌트에 적합큰 상태나 복잡한 로직 처리에 적합어떤 상황에서 사용할까?useState상태가 단순하고 한두 개의 값만 관리하면 충분한 경우.로컬 상태 관리.useReducer상태가 복잡하거나 여러 액션 타입을 처리해야 하는 경우.상태 업데이트 로직을 모듈화하거나 구조화하려는 경우.Context API와 함께 글로벌 상태 관리가 필요한 경우.useState 예시import React, { use..

구분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를 활용한..

Node.jsNode.js는 크로스 플랫폼 자바스크립트 런타임 환경으로, 서버와 클라이언트에서 동일한 언어(자바스크립트)로 코드를 작성할 수 있도록 지원합니다. npm(Node Package Manager)npm은 Node.js의 기본 패키지 관리자입니다. JavaScript 라이브러리와 모듈을 검색, 설치, 관리, 공유할 수 있는 도구로, Node.js 생태계의 핵심 요소 중 하나입니다. - package.json : 프로젝트 정보를 기록하는 핵심 파일로, 의존성, 스크립트, 버전 등의 정보를 포함합니다.  - package-lock.json : 패키지와 하위 의존성의 정확한 버전을 기록하여 일관성을 보장합니다. npx(Node Package eXecute)npx는 Node.js의 패키지 관리자 npm..