나디아 성장 일기

📌 React 애니메이션리액트는 애니메이션을 지원하지 않는다.➡ useRef() + 라이브러리 사용리액트 엘리먼트가 아닌 실제 DOM 엘리먼트에 적용해야 한다.➡  useRef(), refCallback, event handler 등 사용  ✅ Tilt.js ⏩ 설치pnpm install vanilla-tilt   ⏩ 사용 1. 불러오기import VanillaTilt from 'vanilla-tilt';  2. 애니메이션 옵션 설정const VANILLA_TILT_OPTIONS = { // 기울이는 방향을 반대로 변경 reverse: false, // 최대 기울기 회전(도°) max: 15, // X축의 시작 기울기(도°) startX: 0, // Y축의 시작 기울기(도°) startY..

📌 useRef : 컴포넌트의 정보를 기억하되, 해당 정보가 렌더링을 유발하지 않도록 하는 Hook현재(current) 기억된 값이 변경되더라도 기억하지만, 리-렌더링을 요청하지 않음-  state와 달리 ref의 current 값을 설정하면 리렌더가 트리거되지 않는다❌어떤 데이터를 기억하고 싶은데 리렌더링은 안 하고 싶을 때 사용 - 화면 업데이트 ❌ 👉 리렌더링을 해야 바뀜리액트의 것(리액트 훅)이 아닌 것이 아닌 것을 기억해야 할 때 사용 DOM 엘리먼트 저장 및 조작, JSX를 계산하는 데 필요하지 않은 다른 객체 저장 등에 사용 자바스크립트 순수 객체 반환{ current: null } → DOM Mount → { current: HTMLElement } useState 👉 기억된 값을 재..

📌 CSS module 사용하기 ✅ 외부 CSS 파일 참조여러 컴포넌트에서 사용된 CSS 클래스명이 서로 중복될 가능성이 높아진다.서로 다른 두 개의 CSS 파일에 동일한 이름의 CSS 클래스가 정의되어 있다면, 해당 클래스가 적용된 React 엘리먼트는 이 두 스타일이 한꺼번에 적용된다.   ✅ CSS ModuleCSS 클래스명을 고유한 이름으로 자동 변환해서 CSS 클래스명이 서로 겹치는 현상을 방지해준다.CSS Module을 사용하면 CSS 파일마다 고유한 네임스페이스를 자동으로 부여해 주기 때문에 각각의 React 컴포넌트는 완전히 분리된 스타일을 보장받는다.  ⏩ CSS Module 사용 1. CSS 파일명[모듈명].module.css  2. CSS Module 사용{styles.[클래스명]}..

📌 React 렌더링 과정 및 상태 관리    1️⃣ 렌더링 트리거 👉 첫 주문컴포넌트의 초기 렌더링인 경우(애플리케이션 처음 로드)컴포넌트의 state가 업데이트 된 경우(set함수)=> React는 컴포넌트를 렌더링하여 초기 UI를 생성한다.  이 단계에서 UI는 가상 DOM에 생성된다.   2️⃣ Real DOM 반영 👉 첫 서빙(음식 첫 제공)생성된 UI는 가상 DOM에서 실제 DOM에 반영된다.   3️⃣ 상태 관리 👉 컴플레인(추가 주문) 관리사용자가 애플리케이션의 상태를 변경하거나(상호작용) 컴포넌트의 props가 바뀌면, 상태가 업데이트한다.상태 변화는 애플리케이션의 UI에 영향을 미치기 때문에 적절히 관리되어야 한다.   4️⃣ 컴포넌트 렌더링(ReactDOM으로 리렌더링) 👉 ..

📌 Debounce & Throttle: 자주 사용되는 이벤트나 함수의 실행되는 빈도를 줄여서, 성능의 유리함을 가져오기 위한 개념사용자의 의도와 무관한 요청을 줄이기 위한 기능 (input 입력 이벤트, API로 데이터를 가져오는 이벤트 등)스크롤, 윈도우 리사이즈, 마우스 이동 등의 빈번한 이벤트에서 성능을 최적화하는 데 유용 이벤트가 과도하게 발생하는 것을 제한   ✅ Debounce: 입력 주기가 끝남과 동시에 이벤트를 호출한다.같은 이벤트가 반복되게 발생하는 경우, 반복적으로 발생하던 이벤트가 일정 시간동안 다시 발생하지 않으면 콜백 함수를 실행 아무리 많은 이벤트가 발생해도 모두 무시하고 특정 시간 사이에 어떤 이벤트도 발생하지 않았을 때 딱 한번만 마지막 이벤트를 발생시킨다.키워드 검색, ..

📌 HTML  vs  React JSX  HTMLJSX태그 class  className forhtmlFor valuevalue,  defaultValuecheckedchecked,  defaultChecked 태그style 속성에 문자열 style 속성에 {객체}    ℹ️ 태그의 className ✅ HTML ➡︎ class 사용Hello World  ☑️ JSX ➡︎ className 사용Hello World   ℹ️  태그의 htmlFor ✅ HTML ➡︎ for 사용Username:  ☑️ JSX ➡︎ htmlFor 사용Username:   ℹ️  태그의 defaultValue ✅ HTML ➡︎ value 사용  ☑️ JSX ➡︎ value,  defaultValue 사용value: 값을 동..

✨ this를 명시적으로 바인딩 = 함수가 실행될 때 this가 참조하는 객체를 명확하게 지정하는 것 this 값을 제어하거나 함수의 실행 방식을 조정함수의 실행 컨텍스트를 유연하게 변경하고 제어 📌 call(): 함수에 인자를 개별적으로 풀어서 전달함수.call(thisArg, arg1, arg2, ...);함수를 호출할 때 this 값을 설정하고, 그 이후에 이어지는 인수들을 개별적으로 전달함수 즉시 호출 주로 상속이나 메서드 호출 시 유용  function greet(greeting, punctuation) { console.log(greeting + ", " + this.name + punctuation);}const person = { name: "Alice" };greet.call(pe..

📌 useIdconst id = useId() : 접근성 어트리뷰트에 전달할 수 있는 고유 ID를 생성하는 React Hook 컴포넌트의 최상위에서 호출하여 고유 ID를 생성 고유 ID 문자열을 반환 useId를 리스트의 key를 생성하기 위해 사용하면 안 된다❌import { useId } from 'react';function PasswordField() { const passwordHintId = useId(); // ...  접두사 지정하여 사용하기도 함('my-first-app-', 'my-second-app-')import { createRoot } from 'react-dom/client';import App from './App.js';const root1 = createRoot(..

📌 상태 업데이트(State update)상태는 즉시 업데이트 되지 않는다 (= 스냅샷) 👉 렌더링 시점에서 컴포넌트의 상태 값이 즉시 변경되지 않는다 ❌ 상태(state)를 설정하더라도 기존 렌더링의 변수는 변경되지 않으며, 대신 새로운 렌더링을 요청한다. - 다음 렌더링에 대해서만 변경된다. 상태는 불변 데이터(Immutable Data)로 관리된다. - 리액트에서는 상태, 배열, 객체가 변경되면 안된다. ✨불변 데이터와 가변 데이터불변 데이터: 원시형 타입 (String, Number, Boolean, undefined, null, Symbol)가변 데이터: 객체형 타입 (Function, Array, Object) ✅ 상태 업데이트 과정React가 함수를 다시 호출함수가 새로운 JSX 스냅샷 반환..

📌 React Hook(훅) 사용 규칙 ✅ Hook은 최상위 레벨에서만 호출해야 한다. Hook은 항상 React 함수의 최상위 레벨에서 호출하고, return 이전에 사용해야 한다.  Hook은 React가 함수 컴포넌트를 렌더링하는 동안에만 호출할 수 있다. return문, 반복문, 조건문, 이벤트 핸들러, 중첩 함수, try/catch/finally 블록 내부에서 호출 ❌function Counter() { // 함수 컴포넌트의 최상위 레벨에서 사용 const [count, setCount] = useState(0); // ...}function useWindowWidth() { // 커스텀 Hook의 최상위 레벨에서 사용 const [width, setWidth] = useState(w..