전체 글 (30) 썸네일형 리스트형 Link태그 a태그 상태 남기 안남기 1. 동작 흐름 한눈에 보기구분클릭 순간 브라우저가 하는 일React 트리가 어떻게 되나Zustand 스토어는?Link (Next.js)history.pushState()만 호출 → 네트워크 요청 없음기존 React 트리 그대로 유지. router.pathname만 바뀌고 필요한 컴포넌트만 리렌더메모리 그대로. 테마·로그인 등 전역 상태 유지순수 새 HTML 요청 → 전체 다시 파싱기존 React 앱 언마운트 → 새 HTML에 의해 다시 마운트브라우저 메모리 클리어 → 새로운 store 인스턴스 생성 (초기값으로 리셋) 2. 왜 이런 차이가 생길까? - 3단 구조로 뜯어보기2-1. 브라우저 레이어 – “어디까지 다시 그릴까?”Link내부적으로 window.history.pushState()(혹은 rep.. React props와 자바스크립트 데이터 타입 props의 동등 비교는 '얕은 비교'!리액트에서 props를 비교할 때는 얕은 비교를 기반으로 진행된다자바스크립트 데이터 타입자바스크립트는 크게 원시 타입과 객체 타입으로 나뉘어짐원시 타입 (Primitive Type)boolean, string, symbol, number, bigInt, null, undefined원시 타입은 값 자체가 불변(immutable)해서 한번 값이 정해지면 바뀌지 않음메모리에 직접 값을 저장예시로, string은 문자열이 한번 생성되면 그 값을 바꿀 수 없ㄷ..let name = 'sunah';name[0] = 'S'; // 변경되지 않음console.log(name); // 여전히 'sunah'객체 타입 (Object Type)원시 타입이 아닌 모든 것(배열, 함수,.. 리액트의 key 속성이 중요한 이유 “Each child in a list should have a unique ‘key’ prop.” 요러한 경고를 많이 보게 되는데 경고 뜨지 않게 하기 위해 index넣고 넘기는 경우도 많았다. 근데 요건 단순히! 식별자 문제 뿐만 아니라, 렌더링 성능과 관련이 있따. 리액트는 상태가 바뀔 때마다, 가상돔과 실제 돔을 비교해서 바뀐 부분으 ㄹ 판단하고 렌더링을 하게 되는데 그떄 key가 요 컴포넌트가 바뀐 부분인건지, 재사용 가능인지 판단하는 기준이 된다. 고유한 key를 사용하면 어떤 점이 좋은가에 대해 React가 각 요소의 변경 여부를 정확히 판단 → 불필요한 재렌더링 방지리스트 내 요소를 정확하게 추적 가능 → 상태 꼬임 방지성능 최적화 → 필요한 요소만 리렌더링 반대로, key={inde.. 이전 1 2 3 4 ··· 10 다음