useState내부에 선언된 함수가 함수의 실행이 종료된 이후에도 지역변수인 값을 계속 참조할 수 있도록 리액트는 클로저를 활용하는것을 짐작할 수 있음.게으른 초기화useState에 변수 대신 함수를 넘기는 것을 게으른 초기화라고 한다.const [count, setCount] = useState( () => Number.parseInt(window.localStorage.getItem(cacheKey)))useState의 초깃값이 복잡하거나 무거운 연산을 포함하고 있을 때 사용 해당 함수는 오로지 state가 처음 만들어질때만 사용됨. (리렌더링 시 해당 함수는 무시됨)주로 localStorage, sessionStorage에 대한 접근. map, filter, find같은 배열에 대한 접근 혹은 초깃..
Set 자료구조에 대해Set은 중복을 허용하지 않는 자료구조로, 요소의 집합을 나타냄.주로 데이터의 유일성을 보장하고자 할 때 사용수학적 집합 개념을 따르며, 순서가 중요하지 않은 데이터를 관리할 때 유용해시 테이블을 사용한다고 해서 Hash Set이라고도 불림.Set의 주요 연산요소 추가 (Add): Set에 요소를 추가. 중복된 요소는 무시됨.요소 삭제 (Remove): Set에서 특정 요소를 삭제. 요소가 존재하지 않으면 아무런 동작도 하지 않음.요소 존재 여부 확인 (Has): Set에 특정 요소가 포함되어 있는지 확인. 포함 true, 그렇지 않으면 false를 반환.모든 요소 삭제 (Clear): Set의 모든 요소를 삭제.Set 크기 확인 (Size): Set에 포함된 요소의 개수를 반환.S..
* 해당 게시글은 모던 리액트 Deep Dive 도서를 공부하며 정리한 내용입니다. 메모이제이션리액트에서 제공하는 useMemo, useCallback, memo 등은 리액트에서 발생하는 렌더링을 최소한으로 줄이기 위해서 제공주장 1: 섣부른 최적화는 독이다. 꼭 필요한 곳에만 메모이제이션을 추가하자메모이제이션도 어디까지나 비용이 드는 작업이므로 쵲거화에 대한 비용을 지불 할 때는 항상 신중해야 됨.대부분 가벼운 작업 자체는 메모이제이션해서 자바스크립트 메모리 어딘가에 두었다가 그것을 다시 꺼내오는 것보가 매번 작업을 수행해 결과를 반환하는 것이 더 빠를수도 있음.값을 비교하고 렌더링 혹은 재계산이 필요한지 확인하는 비용결과물을 저장해 두었다가 다시 꺼내와야한다는 두가지 비용주장 2: 렌더링 과정의 비..
해시테이블이란?프로그래밍 언어에 따라서 조금씩 다른 이름을 가지고 있음해시(Hash), 맵(Map), 해시맵(HashMap), 딕셔너리(Dictionary)해시 함수로 테이블의 인덱스를 새로 만들기 때문에 해시테이블이라는 이름이 붙음. 해시테이블의 장단점장점빠른 검색 속도: 평균적으로 O(1)의 시간 복잡도로 데이터를 검색할 수 있 음. 빠른 삽입 및 삭제: 평균적으로 O(1)의 시간 복잡도로 데이터를 삽입하거나 삭제할 수 있 음. 유연성: 다양한 종류의 데이터를 효율적으로 저장하고 검색할 수 있음.단점충돌 문제: 두 개 이상의 키가 동일한 해시값을 가질 때 충돌이 발생. 이를 해결하기 위해 추가적인 메모리와 시간이 필요.메모리 사용량: 해시테이블은 효율적인 성능을 위해 종종 실제 데이터보다 큰 메모리 ..
* 해당 게시글은 모던 리액트 Deep Dive 도서를 공부하며 정리한 내용입니다. 렌더링은 어떻게 일어나는가?리액트의 렌더링은 브라우저가 렌더링에 필요한 DOM 트리를 만드는 과정을 의미리액트의 렌더링이란?리액트의 렌더링이란 리액트 어플리케이션 트리 안에 있는 모든 컴포넌트들이 현재 자신들이 가지고 있는 props, state 의 값을 기반으로 어떻게 UI를 구성하고 이를 바탕으로 어떤 DOM 결과를 브라우저에게 제공할 것이지 계산하는 일련의 과정을 의미.리액트의 렌더링이 일어나는 이유렌더링이 발생하는 시나리오 최초 렌더링리렌더링useState()의 두번째 배열 요소의 setter 가 실행되는 경우useReducer()의 두번째 배열 요소인 dispatch가 실행되는 경우컴포넌트의 key props가..
덱 자료구조란덱(Deque, Double-ended Queue)은 양쪽 끝에서 삽입과 삭제가 모두 가능한 자료구조입니다. 즉, 앞쪽과 뒤쪽에서 요소를 추가하거나 제거할 수 있습니다. 덱은 스택과 큐의 기능을 모두 갖추고 있어서 다양한 상황에서 유용하게 사용할 수 있습니다. 덱의 주요 연산주요연산설명시간복잡도 push_front(element) - 삽입 덱의 앞쪽에 요소를 추가 O(1) push_back(element) - 삽입 덱의 뒤쪽에 요소를 추가 O(1) pop_front() - 삭제 덱의 앞쪽에서 요소를 제거하고 반환 O(1) pop_back() - 삭제 덱의 뒤쪽에서 요소를 제거하고 반환 O(1) peek_front() - 조회 덱의 앞쪽 요소를 반환 (제거 X) O(1) p..
* 해당 게시글은 모던 리액트 Deep Dive 도서를 공부하며 정리한 내용입니다. 리액트 파이버 작업순서리액트 파이버의 작업 순서는 복잡한 UI 업데이트를 효율적으로 관리하기 위해 설계됨.크게 렌더 단계 (Render Phase)와 커밋 단계(Commit Phase)로 이루어짐.이 과정을 통해 리액트는 컴포넌트 트리를 재조정하고 실제 DOM을 업데이트함 1. 렌더 단계(Render Phase)순수 계산 단계 = DOM을 실제로 변경하지 않고 어떤 변경이 필요한지 결정이 단계는 중단될 수 있으며, 우선순위 높은 작업이 있을 경우 해당 작업을 먼저 처리 할 수 있음.리액트는 beginWork() 함수를 실행함각 컴포넌트의 Fiber Node를 순회하며 업데이트 시작새로운 props, state, cont..
큐 자료구조란?큐(Queue)는 컴퓨터 과학에서 가장 기본적인 자료구조 중 하나로, 먼저 들어온 데이터가 먼저 나가는 FIFO(First In, First Out) 원칙을 따릅니다. 큐는 일상생활에서 줄을 서는 것과 유사하게, 먼저 줄에 선 사람이 먼저 나가는 구조입니다. 큐의 주요 연산:Enqueue: 큐의 끝에 새로운 요소를 추가하는 연산입니다.Dequeue: 큐의 앞에 있는 요소를 제거하고 반환하는 연산입니다.Peek 또는 Front: 큐의 앞에 있는 요소를 제거하지 않고 반환하는 연산입니다.IsEmpty: 큐가 비어 있는지를 확인하는 연산입니다.Size: 큐에 있는 요소의 개수를 반환하는 연산입니다.큐의 종류:순차 큐 (Linear Queue): 배열을 이용해 구현하며, 큐의 크기가 고정됩니다.원..
* 해당 게시글은 모던 리액트 Deep Dive 도서를 공부하며 정리한 내용입니다. DOM과 브라우저 렌더링 과정DOM은 웹페이지에 대한 인터페이스로 브라우저가 웹페이지의 콘텐츠와 구조를 어떻게 보여줄지에 대한 정보를 담고 있다.브라우저의 렌더링 과정브라우저가 사용자가 요청한 주소를 방문해 HTML 파일 다운로드 받음브라우저의 렌더링 엔진은 HTML을 파싱해 DOM 노드로 구선된 트리(DOM)를 만든다.2번 과정에서 CSS파일을 만나면 해당 CSS 파일도 다운로드 받음브라우저 렌더링 엔진은 이 CSS 파일도 파싱해 CSS 노드로 구성된 트리(CSSOM)를 만든다브라우저는 2번과정에서 사용자 눈에 보이는 노드만 순회하면서 방문함. display: none 방문X눈에보이는 노드를 대상으로 해당 노드에 대한..
스택 알고리즘의 기본 개념스택의 정의: 후입선출(LIFO) 방식으로 동작하는 자료 구조. 가장 나중에 삽입된 데이터가 가장 먼저 제거됨.기본 연산:Push: 스택의 맨 위에 데이터를 추가합니다.Pop: 스택의 맨 위 데이터를 제거하고 반환합니다.Peek/Top: 스택의 맨 위 데이터를 제거하지 않고 반환합니다.isEmpty: 스택이 비어 있는지 확인합니다.스택의 활용 사례프론트엔드 개발에서 스택을 활용하는 몇 가지 대표적인 사례를 살펴보겠습니다.브라우저의 뒤로 가기/앞으로 가기 기능:방문한 페이지의 URL을 스택에 저장하고, "뒤로 가기"를 누르면 Pop 연산을 사용하여 이전 페이지로 이동합니다.괄호의 유효성 검사:코드 에디터나 웹 폼에서 괄호의 짝을 맞추기 위해 스택을 사용합니다.문자열 역순 변환:문자..