useCallback은 리액트에서 제공하는 훅으로, 함수의 메모이제이션을 위해 사용된다. ⚡ 컴포넌트가 렌더링될 때마다 동일한 함수를 다시 생성하는 것을 방지하고, 불필요한 렌더링을 줄여 성능을 최적화하는 데 유용하다. 특히 하위 컴포넌트에 콜백 함수로 함수를 전달할

useMemo는 리액트에서 제공하는 훅으로, 컴포넌트가 렌더링될 때 비용이 많이 드는 연산을 최적화하기 위해 사용된다. 🧠✨ 특정 값이 변경되었을 때만 계산을 재수행하게 해주므로, 불필요한 연산을 줄이고 성능을 높이는 데 유용하다.useMemo의 기본 사용법 🔧us

리액트 생명주기 (Life Cycle)란 컴포넌트가 생성되고 업데이트되고 소멸되는 과정을 말한다. ⚙️ 이 생명주기를 이해하면 컴포넌트가 특정 시점에서 어떤 상태인지, 그리고 그에 따라 어떤 작업을 수행할 수 있는지 알 수 있다. 리액트 생명주기는 크게 세 가지 단계로

리액트에서 배열을 렌더링할 때 꼭 🔑 key라는 속성을 설정해야 한다. 🔑 key는 리액트가 각 요소를 구분할 수 있게 해주는 유일한 식별자 역할을 하기 때문이다. 🔑 key가 없으면 리액트는 어떤 요소가 변경되었는지 모르게 되고, 그 결과 불필요하게 많은 리렌더

오늘은 this 키워드를 알아보려 한다. this를 사용해본적이 없어 이것을 도대체 어떻게 사용하는 건지 건지 알쏭달쏭했다. 오늘 그것을 깔끔하게 정리해 보려한다. 추가로 "Lexical Scope"까지 같이 알아보자.호출 하는 관점에서 간단하게 설명하자면, this는

JavaScript에서 변수 선언할 때마다 var, let, const 세 가지 중 뭘 써야 할지 헷갈린다면...? 사실 나는 var를 한번도 써본적이 없긴하다. js를 배운지 한달밖에 안되었고 처음부터 let과 const만을 사용해서 배웠다. 그런데 이번에 그

브라우저는 웹 세상을 탐험할 수 있게 해주는 마법 같은 소프트웨어

오늘 태어나서 처음으로객체 배열의 값을 for문을 사용해 DOM에 동적으로 표현하는 경험을 하였다내가 느낀 이 감동을 뭐라고 표현해야 할지 몰라 제목을 못 정하겠다개인적으로 매우 역사적인 순간이네 총잡이'강~!'사님께 다시한번 정말 감사한 마음을 표하며...

.abc .def => 클래스 abc를 가진 요소의 자식,자손 요소 중에서 클래스 def를 가진 요소를 선택. .abc.def => 클래스 abc와 def를 동시에 가진 요소를 선택. 한 요소에 두 클래스 모두를 가지고 있어야 함. 그래서 두 선택자는 사용되는 맥락에 따라 매우 다르게 작용한다. .abc .def 는 '자손요소1'과 '자손요소2'...

CSS의 가장 중요한 개념 중 하나가 바로 "Cascading"이다. 이게 실제로는 스타일 적용의 우선순위와 관련된 부분인데, 처음 CSS를 접했을 땐 그냥 "스타일을 입히는 방법" 정도로만 생각했다. 그런데 최근 다시 공부해보다보니 아, 이게 꼭 "스타일 배틀" 같은

"CSS 마진 상쇄는 부모와 형제를 가리지 않는다."CSS 마진 상쇄에 대해 공부하던 중,부모와 형제 간 마진 상쇄는 어떻게 일어나는지또한 예외 사항은 없는지, 궁금해서 혼자 이리저리 뚝딱거리다가border 값이 들어갔을 때, 값의 변화를 발견하여 기록해 보기로 했다.