배열 타입배열의 모든 요소가 '동일한' 타입을 갖도록 명시이를 통해 배열 내부 요소의 타입 안정성 제공 type[]Arraylet numbers: number[] = [1, 2, 3, 4];let strings: string[] = ['a', 'b', 'c'];let mixed: (string | number)[] = [1, 'a', 2, 'b'];  객체 타입객체의 각 속성(property)과 해당 속성의 타입을 명시적으로 정의타입을 사용해 객체의 형태(shape)를 표현 객체 타입을 통해객체의 형태 구조를 보장하고 예측예상치 못한 값이 들어가는 것을 방지 객체의 Property 타입optional(옵셔널): 특정 속성이 필수가 아닌 선택적임을 표현, 속성이름 뒤에 물음표(?) 사용readonly(읽기..

Debounce와 Throttle은 심화적인 개념이기도 하고 꼭 적용해야하는 개념은 아니어서 알아두면 좋고 사용할 수 있으면 좋은 정도다 라고 생각하고 내용을 보면 된다연속적으로 발생하는 함수나 이벤트를 묶어서 처리하는 방식-> 최적화를 통한 성능 향상 목적  자바스크립트에서 이벤트를 제어하여, 빈번하게 발생하는 이벤트를 효율적으로 처리하기 위한 두 가지 기법스크롤, 리사이즈, 입력 등 사용자 상호작용이 잦은 이벤트에서 성능 최적화에 유용함 Debounce (디바운스)특정 시간이 지난 후에 이벤트를 실행하도록 지연시키는 방식 (마지막에 한 번에 묶어서 처리해도 상관 없을 때)이벤트가 연속해서 발생하면 마지막 이벤트만 실행사용자가 멈춘 후 일정 시간이 지나야 작업을 수행하므로, 마지막 동작 이후 일정 시간..

번들링프로젝트에 필요한 여러 파일(JS, CSS, Image 등)을 하나의 파일로 묶어, 사용자가 웹 애플리케이션에 접근할 때 브라우저에 필요한 리소스를 효율적으로 로드할 수 있도록 하는 과정리액트 애플리케이션은 여러 컴포넌트와 모듈로 구성되기 때문에, 이를 번들링하지 않으면 많은 개별 파일을 요청해야 하고, 이로 인해 불필요한 네트워크 지연이 발생할 수 있음 리액트에서는 주로 Webpack(CRA)이나 Rollup(Vite) 같은 번들러를 사용해 이러한 파일을 하나의 번들로 묶음이렇게 하면 모든 리소스를 한 번에 전달할 수 있어 초기 로딩 성능이 향상되며, 코드의 의존성 관리도 간편해짐장점성능 최적화 : 개별 파일을 하나로 묶어 네트워크 요청 횟수를 줄여 초기 로딩 시간 단축코드 의존성 관리 : 모든 ..

함수형 컴포넌트함수형 컴포넌트는 기존 클래스형 컴포넌트와 달리 React Hooks를 통해 생명주기를 관리함함수형 컴포넌트는 생명주기 메서드 대신 useEffect, useState 등의 훅을 사용해 상태 관리 부수 효과 (side effect)를 처리함 마운트(Mount) 단계컴포넌트가 처음 DOM에 삽입될 때 발생이때 주로 초기 데이터를 설정하거나, 네트워크 요청 수행 useEffect (마운트 시 실행)useEffect(() => { // 마운트될 때 한 번 실행되는 로직 console.log("Component mounted"); // 클린업 함수는 마운트가 해제될 때 실행 return () => { console.log("Component unmounted"); };}, []); ..

클래스형 컴포넌트 생명주기생성 (Mounting)업데이트 (Update)제거 (Unmounting)각 단계에서는 특정 메서드를 사용할 수 있어 컴포넌트의 상태나 데이터를 제어하고, 특정 작업을 수행할 수 있음 마운팅(Mounting) 단계마운팅 단계는 컴포넌트가 처음 DOM에 삽입될 때 발생함 constructor컴포넌트를 초기화 할 때 호출초기 state를 설정하거나 클래스형 컴포넌트에서는 this 바인딩을 설정할 수 있음 static getDerivedStateFromProps(props, state)컴포넌트가 생성될 때 props로부터 state를 업데이트하고자 할 때 사용return된 객체가 새로운 state가 됨주로 props에 따라 state가 동기화되도록 설정할 때 유용 render컴포넌트를..

React에서 성능 최적화는 불필요한 렌더링을 줄이고 렌더링 속도를 높이는 것을 목표로 함React는 기본적으로 빠르게 렌더링 되지만, 컴포넌트가 많아지거나 상태가 복잡해지면 최적화가 필요함useMemo, useCallback, React.memo는 성능 최적화를 위한 도구로, 불 필요한 계산이나 렌더링을 방지하여 앱의 렌더링 성능을 개선할 수 있음 메모이제이션컴포넌트가 불필요하게 다시 계산하거나 렌더링하는 것을 방지하기 위해 이전에 계산한 값을 저장해두고 재사용하는 기법컴포넌트가 특정 상태나 props가 변경되지 않으면, 이미 저장된 값이나 함수를 재사용하여 성능을 최적화 할 수 있음 useMemo: 값 메모이제이션역할: useMemo는 비용이 많이 드는 연산(복잡한 계산)이나 함수 결과를 메모이제이션..