728x90 반응형 SMALL 기술 개발74 얕은 복사 vs 깊은 복사 자바스크립트에서의 얕은 복사와 깊은 복사를 알기 전, 자바스크립트의 데이터 타입에 대해 알아야 한다. 데이터 타입(Data Type)은 프로그래밍 언어에서 사용할 수 있는 데이터의 종류를 말한다. 데이터 타입은 데이터를 메모리에 저장할 때 확보해야 하는 메모리 공간의 크기와 할당할 수 있는 유효한 값에 대한 정보, 그리고 메모리에 저장되어 있는 2진수 데이터를 어떻게 해석할 지에 대한 정보를 컴퓨터와 개발자에게 제공한다. 자바스크립트에서 데이터 타입은 원시 타입과 객체 타입으로 나뉜다. 원시 타입의 값은 변경 불가능한 값(immutable value)이며 pass-by-value(값에 의한 전달) 방식으로 전달된다. 객체 타입의 값은 pass-by-reference(참조에 의한 전달) 방식으로 전달된다... 2023. 1. 12. 컴포넌트 성능 최적화 컴포넌트는 4가지와 같은 상황에서 리렌더링이 발생한다. 자신이 전달받은 props가 변경될 때 자신의 state가 바뀔 때 부모 컴포넌트가 리렌더링될 때 forceUpdate 함수가 실행될 때 컴포넌트의 개수가 많지 않다면 모든 컴포넌트를 리렌더링해도 느려지지 않지만, 약 2000개가 넘어가면 성능이 저하된다. 따라서, 컴포넌트 리렌더링 성능을 최적화해 주는 작업을 진행해야한다. 1. React.memo를 사용하여 컴포넌트 성능 최적화 - React.memo를 쓰기 전과 후 성능 비교 // TodoListItem.js import React from 'react'; import { MdCheckBoxOutlineBlank, MdCheckBox, MdRemoveCircleOutline } from 'rea.. 2023. 1. 10. React hooks (useRef) React hooks (useRef) const refContainer = useRef(initialValue); useRef는 .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환한다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지될 것이다. useRef는 언제 사용할까? 1. DOM 조작 useRef를 사용하여 DOM 요소를 참조하고 해당 요소를 직접 조작할 수 있다. 예를 들어, 입력 필드를 포커스하거나, 특정 요소의 스크롤 위치를 조정하거나, 또는 애니메이션을 제어하는 등의 작업을 수행할 수 있다. ex) 클릭 이벤트가 발생했을 때 특정 DOM 요소를 포커스 import { useRef } from 'react'; function Examp.. 2023. 1. 8. React hooks (useCallback) useCallback도 useMemo와 비슷한 함수다. https://suzzeong.tistory.com/100 React Hooks (useMemo) useMemo는 메모이제이션된 값을 반환한다. 메모이제이션(memoization)은 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제 suzzeong.tistory.com useMemo와 비슷하게 렌더링 성능을 최적화해야하는 상황에서 사용한다. useCallback을 사용하면 함수를 재사용할 수 있다는 장점이 있다. 예를 들어서, 컴포넌트 함수에 함수가 선언이 되어 있으면 함수는 컴포넌트가 렌더링될 때마다 새로운 함수를 생성하게 된다. 하지만, useCallback을 사용하면, 컴포.. 2023. 1. 8. React Hooks (useMemo) useMemo는 메모이제이션된 값을 반환한다. 메모이제이션(memoization)은 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다. useMemo를 사용하면 함수 컴포넌트 내부에서 발생하는 연산을 최적화할 수 있다. 렌더링하는 과정에서 특정 값이 바뀌었을 때만 연산을 실행하고, 원하는 값이 바뀌지 않았다면 이전에 연산했던 결과를 다시 사용하는 방식이다. const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); 첫번째 인수에는 어떻게 연산할지 정의하는 생성(create)함수, 두번째 인수에는 의존성 값의 배열을.. 2023. 1. 6. 호이스팅(Hoisting) (feat. var, let, const) 영어 사전에서 Hoist는 '들어(끌어)올리다'라는 의미를 가지고 있다. 그러면 자바스크립트에서 호이스팅이란 무엇을 의미할까? MDN에 의하면 JavaScript에서 호이스팅이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다. 즉, 변수의 선언과 초기화를 분리한 후, 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 의미한다. var로 선언한 변수의 경우에는 호이스팅 시 undefined로 변수를 초기화 한다. 반면, let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않는다. let과 const로 선언한 변수도 호이스팅 대상이지만, var와 달리 호이스팅 시 undefined로 변수를 초기화하지 않는다. 따라서.. 2023. 1. 5. 이전 1 2 3 4 5 6 7 ··· 13 다음 728x90 반응형 LIST
