나디아 성장 일기

📌 useEffect(): 리액트 컴포넌트와 외부 시스템을 동기화할 때 사용렌더링 자체에 의해 발생하는 부수 효과를 특정하는 것특정 이벤트가 아닌 렌더링에 의해 직접 발생한다.(어떤 상호작용과도 상관없이 발생, 커밋 단계 이후 실행 됨)React는 화면을 업데이트한 다음 useEffect 내부의 코드를 실행한다.➡️ useEffect는 화면에 렌더링이 반영될 때까지 코드 실행을 지연 시킨다.외부 시스템(external) : React에서 제어되지 않는 시스템(ex. 네트워크, 브라우저 API, 서드파티 라이브러리와의 연결, 데이터 가져오기, DOM 수정, 타이머 설정, 구독 등)ex) 서버에 접속하는 것➡︎ 순수한 계산이 아니고 부수 효과를 발생시키기 때문에 렌더링 중에는 할 수 없다❌➡︎ 이벤트도 아..

✅ Motion One ⏩ 설치pnpm add motion   ⏩ 기능 (1) animatie(): DOM 요소 또는 집합을 쉽게 애니메이션 한다.import { animate } from 'motion';animate(target, props, options?)매개변수첫 번째 인수: 애니메이션을 적용할 DOM 요소두 번째 인수: CSS 속성 값(객체 or 배열)세 번째 인수: 애니메이션 옵션 객체props에 함수를 설정할 수 있다.animate ( element, { x: 400, rotate: 360 }, { duration: 1.5, delay: 0.5 } );};// 함수animate ( (progress) => { box.textContent = Math.round(pro..

📌 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으로 리렌더링) 👉 ..

📌 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: 값을 동..

📌 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..