나디아 성장 일기

📌 데이터 패칭(Data Fetching) : 외부 API나 데이터베이스 등에서 데이터를 가져오는(읽는) 작업 서버에 데이터 요청/응답 (읽기(Read)) 비동기적: 네트워크 요청은 서버에서 데이터를 가져오는 동안 비동기적으로 처리됨주로 GET 요청: 데이터 패칭은 HTTP `GET` 요청을 통해 서버에서 데이터를 조회하는 형태 API 상태 관리: 데이터 패칭 과정에서 `isLoading, data, error` 등 API 상태를 관리해야 함서버의 데이터를 가져오는 작업은 이펙트(Effect)를 사용한다.   ✅ 이펙트(Effect) 사용 API 서버에 데이터를 요청해 응답받은 데이터를 렌더링이펙트를 사용해 Promise 또는 Async / await를 사용해 데이터 가져오기를 요청데이터 가져오기 요청..

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

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