매일매일

기본 개념`useEffect`와 `useLayoutEffect`는 모두 컴포넌트가 렌더링된 후 특정 작업을 수행하기 위해 사용됩니다. 하지만 각각의 실행 시점과 목적이 다르기 때문에, 상황에 따라 적절한 Hook을 선택해야 합니다.  useEffect`useEffect`는 렌더링이 완료된 후 비동기적으로 실행됩니다. 즉, 화면이 사용자에게 실제로 표시된 이후에 실행됩니다.주요 특징비동기적 실행화면 표시 후 실행성능에 미치는 영향이 적음사용 사례useEffect(() => { // API 데이터 가져오기 fetchData().then(data => setData(data)); // 이벤트 리스너 등록 window.addEventListener('resize', handleResize); // 클린..

리액트에서 `index`를 key로 사용하는 것은 권장되지 않는 이유는 배열의 요소들이 추가되거나 삭제될 때, 배열의 순서가 바뀌는 경우 문제가 발생할 수 있기 때문입니다.리액트에서 `key`를 통해 리스트에서 어떤 요소가 변경, 추가, 삭제됐는지를 추적합니다. 그러나 index를 key로 사용하면 배열의 순서가 변경될 때 리액트가 요소들을 잘못 인식할 수 있습니다. 예를 들어 배열에 새로운 요소가 중간에 추가되면 그 뒤에 있는 요소들의 인덱스가 모두 변경되게 된다. 리액트는 이를 새로운 요소로 인식해 불필요하게 재렌더링을 하거나, 요소의 상태를 잘못 처리할 수 있습니다.// 초기 상태의 할일 목록const todos = [ { text: '운동하기' }, // index: 0 { text: '공부하..

`이벤트 전파`에는 DOM(Document Object Model)에서 이벤트가 발생했을 때, 그 이벤트가 어떠한 방식으로 전파되는지를 설명하는 개념입니다.이벤트 전파에는 크게 세 단계로 나눌 수 있습니다.캡처링(Capturing)타겟(Target)버블링(Bubbling) 클릭! 1. 캡처링(Capturing)`캡처링`은 이벤트가 DOM 트리의 최상위 요소(document 또는 window)에서 시작해, 이벤트가 발생한 요소(타깃 요소)로 향해 내려가는 단계입니다. 즉, 부모에서 자식으로 아래로 내려가며 이벤트가 전파되는 단계를 `캡처링`이라고 합니다.// 캡처링 예시element.addEventListener('..

브라우저가 웹 페이지를 화면에 표시하기 위해 거치는 과정을 `브라우저 렌더링 파이프라인`이라고 합니다. 브라우저 렌더링 파이프라인은 5단계로 구성됩니다.DOM 생성CSSOM 생성렌더 트리 생성레이아웃페인팅컴포지팅1. DOM 생성브라우저가 HTML 파일을 받으면, 이 파일을 바이트(byte) 단위로 읽기 시작합니다. 브라우저의 HTML 파서(Parser)는 이 바이트들을 문자로 변환하고, 이 문자들을 HTML 토큰으로 변환합니다. 이 HTML 토큰들은 각각의 태그와 그 안에 포함된 텍스트, 속성 등을 의미하게 됩니다.HTML을 생성하게 되면, 브라우저는 이를 기반으로 `DOM 트리`를 생성합니다. DOM 트리는 HTML 문서의 구조를 트리 형태로 표현한 것으로, 각 태그가 노드(node)가 되어 `부모 -..

메모이제이션(Memoization)리액트를 성능 최적화하는 방법에는 대표적으로 `메모이제이션`을 말할 수 있습니다.리액트의 `memo`를 사용하여 컴포넌트를 메모이제이션 할 수 있습니다. 이는 컴포넌트의 props가 변경되지 않았을 때, 리렌더링을 방지하여 성능을 최적화 합니다. 특히, 렌더링 비용이 큰 컴포넌트에서 유용합니다.import React, { memo } from 'react';const MyExpensiveComponent = memo(({ data }) => { // 복잡한 연산이나 많은 DOM 조작이 필요한 컴포넌트 console.log('Expensive component rendered'); return ( {data.map(item => ( {it..