클로저 환경에 접근하고 싶을 때, useRef().current 사용 권장클로저(Closure)는 자신이 선언된 당시의 렉시컬 환경을 기억하는 함수예요.렉시컬 환경이란, 함수가 정의될 때의 스코프변수, 함수에 접근할 수 있는 유효한 범위예요. 선언된 환경을 기억하고 있어서,함수가 실행된 이후에도 그 안의 변수에 접근할 수 있죠.이 덕분에 클로저는 변수를 외부로부터 숨기거나,예기치 않게 값이 바뀌는 걸 방지하는 데 자주 사용돼요.export default function App() { function initCounter() { let num = 0; // 클로저 function increment() { console.log((num += 1)); } increment..

"주말이 더 이상 기대되지 않는다." 평일을 보낼 때가 마음이 더 편하다. 이력서를 수정하고 지원 공고를 찾아볼 때마다 마음이 가볍지 않다. 마감일순, 최신순으로 찾아봐도 대부분 봤던 공고들이다. 지원할 기업은 많지 않고 지원자들은 많다. 이럴 때마다 '이번에는 될 거 같아'라는 열정이 사그라든다. 취업 준비 기간이 평균 6개월이 넘어간다는데 이 기간을 어떻게 버티는 건지. 취업자들은 대단하다.월요일이 되면 새로운 성과을 낼 열정으로 시작하지만, 주말이 되면 다시 사그라든다. 가끔 채용 공고를 보면 '이 기업은 나하고 딱 맞다'라는 생각이 들 때가 있다. 운명이라고 느껴진달까. 한눈에 반한 느낌이다. 그만큼 이 공고를 본 건 우연이 아니라는 거지. 그렇게 열심히 입사동기를 작성하고 또다시 서류 지원을 ..

프로그래밍에서 메모리 관리는 성능에 큰 영향을 주는 중요한 요소예요.그중에서도 스택(stack)과 힙(heap)은 대표적인 메모리 영역이에요.개발을 하다 보면“왜 스택은 힙보다 빠를까?”이런 질문이 떠오르곤 해요.이번 글에서는 스택과 힙이 어떻게 다르고,왜 스택이 더 빠른지 그 이유를 알아볼게요. 스택과 힙 메모리는 뭔가요?스택은 함수 실행 정보나 지역 변수 데이터를 저장해요.힙은 배열이나 객체 같은 동적으로 생성되는 데이터를 저장하는 곳이에요. 스택과 힙의 특징은 어떻게 구분되나요?스택함수가 실행되면 매개변수, 지역변수 등을 스택에 저장해요.함수가 끝나면, 해당 메모리는 자동으로 해제돼요.후입선출(LIFO) 방식이고 연속적인 메모리 공간이에요.구조가 단순해서 접근 속도가 매우 빨라요.힙객체나 배열처럼 ..

이전 내용에서변수가 객체면 새로운 참조값을 반환해서매번 리렌더링 될 수 있다는 내용이 있었는데요.이번 내용에서는,왜 객체는 참조 주소를 사용할까?값 그대로를 비교하면 되지 않나?근본적인 질문을 다뤄보려 해요. 왜 객체는 값 그대로를 비교하지 않을까?객체를 값으로 비교할 수 있다면,구조가 복잡한 데이터에서도 상태 변화 여부를 쉽게 판단할 수 있을 거예요.const obj_origin = { number: 1 };const obj_same = { number: 1 };// true를 반환하면 비교 수월, 처리 빠름console.log(obj_origin === obj_same); // false// 하지만 실제로는 // 문자열로 변환하는 단계를 거쳐야 해요const obj1 = JSON.stringify(o..

이번 글에서는랜딩 페이지 배너를 만들면서 알게 된useMemo의 변수 저장 방식에 대해 알아보려 해요. useMemo는 뭔가요?useMemo는 콜백 함수의 반환 값을 기억하는 리액트 훅이에요.의존성 배열에 포함된 값이 변경될 때만 콜백 함수가 다시 실행돼요.// 실행 함수const callBack = () => {};// callBack 함수 반환값 기억useMemo(callBack, []);이때 반환된 값을 메모이제이션* 해서 불필요한 연산을 줄이는 것이 핵심이에요.메모이제이션: 콜백 함수의 반환 값을 메모리에 저장해 두는 것그리고 useMemo는콜백 함수가 실행되어도 리렌더링 여부를 결정하지 않아요.연산 결과를 기억할 뿐이에요.그리고 이전과 다른 값을 반환하면 새로운 값을 메모이제이션 해요.그 값을 ..

도입리액트는 가상 DOM을 사용해요.이 가상 DOM은 리액트의 메모리 안에 저장돼 있죠.그렇다면 이 메모리는 어떻게 관리할 수 있을까요?이번 글에서는 리액트 메모리 누수를 막기 위한 관리 방법을 알아보려고 해요. 리액트와 메모리리액트는 자바스크립트(JS) 기반 라이브러리예요.그래서 리액트 메모리는 자바스크립트 메모리 하고 관련 있어요 자바스크립트는 고급 언어로, 직접 메모리를 해제하지 않아도 자동으로 메모리를 관리해 줘요.이 역할을 하는 게 가비지 컬렉터(Garbage Collector)예요.가비지 컬렉터는 참조되지 않는 객체를 쓰레기로 판단해서이를 메모리에서 제거해 공간을 확보해 줘요.이 정리 작업은 일정 주기마다 일어나는 게 아니라,엔진이 필요하다고 판단할 때 자동으로 동작해요. 자바스크립트 메모리는..