[React] 참조형과 useState
참조형 state 배열이나 객체 등 참조형 변수를 state로 다루는 것 spread 등을 통해 새롭게 참조형변수를 만들어야 함 주의 참조형은 변수의 값으로 주소값을 가짐 주소값이 안변하므로 동작하지 않음 gameHistory.push(nextNum); setGameHistory(gameHistory); 주소값이 변하므로 동작함 setGameHistory([...gameHistory, nextNum]); 예시 비정상 작동 useEffect에서 setSortedItems에 items을 정렬한 배열의 주소를 전달하고 있다. sort는 새로운 배열을 반환하지 않는다 따라서 sortedItems은 백날 저렇게 sort 해봐야 재렌더링이 일어나지 않는다. 근데 왜 버튼을 누르면 무언가 동작은 하고있는가? 이건 또..
💡 처음부터 전체 데이터가 다 넘어오는 구조라면, 매번 저 처리를 하는 것은 오히려 성능 저하를 발생시킬 것 같다. 어짜피 처음에 데이터가 다 넘어오는데 처음에 계산해서 값을 가지고 있고, 요구할 때는 새로 계산하는 것이 아니라 계산해놓은 데이터를 보여주는 것이 더 좋지 않을까? 유지보수성은 떨어지겠지만. 성능 최적화는 메모리 사용량과 계산 시간 사이의 균형을 맞추는 작업이다. 데이터가 처음부터 모두 사용 가능하고, 사용자의 정렬 요구가 자주 발생하지 않는다면, 애플리케이션의 초기 로드 시에 모든 가능한 정렬 순서를 미리 계산해두고, 사용자의 입력에 따라 해당 배열을 선택적으로 렌더링하는 방식이 성능적으로 유리할 수 있다고 한다. 그런 경우 아래와 같은 장점을 가진다. 반응 속도 향상: 사용자가 정렬 버..
vite 프로젝트는 기본적으로 아래 구조를 가지고 있다 my-vite-project/ ├─ node_modules/ ├─ src/ │ ├─ main.tsx │ └─ ... ├─ index.html ├─ package.json └─ vite.config.js index.html은 루트에 위치함을 알 수 있다. 만약, 이 루트 페이지의 경로를 바꾸고 싶다면 아래의 방법을 따라야한다. vite.config.js 파일 수정 - defineConfig에 root:'루트로지정할경로' 를 입력한다. (예시) // vite.config.js import { defineConfig } from 'vite'; export default defineConfig({ root: 'public', // 루트 디렉토리를 'publ..
코드 import React from 'react'; import { ReactDOM } from 'react-dom/client'; const root = ReactDOM.createRoot(document.getElementById('main-root')); root.render(); function SharedMainScreen() { return ( Shared Main Screen ); } 원인 ReactDOM은 React 18부터 ReactDOM.createRoot를 사용하여 루트를 생성하지만, 임포트 방식이 약간 달라짐 { ReactDOM } 으로 가져오지 않고 ReactDOM으로 가져옴 (default로 내보내기 때문) import { ReactDOM } from 'react-dom/cli..
자바스크립트에서는 기본 데이터 타입과 객체 데이터 타입에 따라 복사 방식이 다름 기본 데이터 타입 (Primitive Data Types): 기본 데이터 타입에는 Number, String, Boolean, Undefined, Null, Symbol 및 BigInt가 있음 이러한 데이터 타입의 변수를 복사할 때는 값이 직접 복사됨 값에 의한 복사(Value-by-Value Copy) let a = 10; let b = a; // 값에 의한 복사 b = 20; console.log(a); // 출력: 10, 'a'의 값은 변경되지 않음 객체 데이터 타입 (Object Data Types): 객체 데이터 타입에는 Object, Array, Function, Date, RegExp 등이 있음 이..