📌 프로그래밍에서의 파라미터 뜻✅ 정의할 때 사용되는 변수 (매개변수)함수나 메서드를 정의할 때 괄호 안에 적는 이름 있는 변수예:def greet(name): # 여기서 name은 "파라미터" print("Hello,", name)✅ 호출할 때 실제 전달되는 값 (인자, 아규먼트)함수를 실행하면서 넣어주는 실제 값예:greet("Alice") # 여기서 "Alice"는 아규먼트 (인자)name → 파라미터 (parameter)"Alice" → 인자 (argument)하지만 실제 대화나 설명에서는 둘을 혼용해서 "파라미터"라고 말하는 경우도 많습니다.💬 쉽게 말하면용어 설명 ..
1. package.json 빌드내용 수정//package.json"scripts": { "start": "react-scripts start", "build": "set \"GENERATE_SOURCEMAP=false\" && react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, 2. npm run build 3. npm i -g serve : 로컬에서 테스트 4. serve -s build : 확인하기
✅ useLayoutEffect란?📌 컴포넌트가 화면에 그려지기 직전에 동작하는 리액트 훅입니다.🕒 실행 타이밍:훅 실행 시점 useEffect화면에 렌더링된 후 (비동기)useLayoutEffectDOM 업데이트 전 (동기) ❓언제 useLayoutEffect를 써야 해?✅ DOM의 크기나 위치를 측정하거나✅ 애니메이션 라이브러리(예: GSAP)를 사용할 때!이유는:useEffect는 화면이 그려진 후에 실행되기 때문에, 애니메이션 시작 전에 깜빡임(flicker)이 생길 수 있음useLayoutEffect는 렌더링 직후, 브라우저가 화면에 반영하기 전에 실행돼서 더 자연스럽게..
🧩 TypeScript + React에서 ref 정리✅ 전체 요약리스트를 렌더링할 때 ref를 map() 안에서 동적으로 관리하고자 할 때,배열 방식과 객체(Record) 방식의 차이, 그리고 ref 함수의 타입에 대한 이해가 중요함.🔹 Q1. ref={el => itemRefs.current[item.id] = el} 에서 el의 타입은?HTMLDivElement | null마운트 시에는 실제 DOM 엘리먼트 (HTMLDivElement), 언마운트 시에는 null🔹 Q2. 컴포넌트에 ref를 쓰면 el의 타입은?일반 컴포넌트는 ref를 직접 받을 수 없음forwardRef로 감싸야 함그 경우 el의 타입은 ref가 노출하는 객체 (T | null)🔹 Q3. useRef>({})의 의미?Reco..
*map에서 ref 사용하기import { useRef, useEffect } from 'react';type Item = { id: number; name: string;};const items: Item[] = [ { id: 1, name: 'First' }, { id: 2, name: 'Second' }, { id: 3, name: 'Third' },];export default function ListComponent() { const itemRefs = useRef([]); useEffect(() => { // 예시: 두 번째 요소에 포커스 주기 itemRefs.current[1]?.scrollIntoView({ behavior: 'smooth' }); }, []); ..
useCallback**함수의 메모이제이션(기억)**을 위한 훅입니다.컴포넌트가 리렌더링될 때마다 새로 정의되는 함수를 같은 참조로 유지하고 싶을 때 사용합니다.tsxconst increment = useCallback(() => { setCount((prev) => prev + 1); }, []);useCallback(fn, deps)는 deps 배열이 바뀌지 않는 한 fn 함수를 재생성하지 않음주로 props로 함수를 자식 컴포넌트에 넘길 때, 불필요한 리렌더링 방지에 유용📌 1. useCallback과 useMemo의 차이useCallback과 useMemo는 뭐가 다른가요?항목 useCallback ..
1. GSAP란?자바스크립트 애니메이션 라이브러리로, 자연스러운 애니메이션을 쉽게 만들 수 있음React에서도 gsap + ScrollTrigger 플러그인으로 스크롤 기반 애니메이션 구현 가능2. React에서 GSAP 사용법 (TypeScript 포함)useRef로 DOM 요소 참조useEffect에서 gsap.to 또는 ScrollTrigger 초기화querySelectorAll 로 여러 요소 선택 시 타입 명시 추천querySelector는 한 개 요소 선택, null 체크 필수3. 배열 vs 단일 요소 선택여러 요소 다룰 때 querySelectorAll + 반복문 사용한 개 요소만 다룰 때 querySelector + null 체크작은 프로젝트에 한 컴포넌트 내 3개 요소 모두 카운팅 효과 넣..
1. scrollTo 파일 만들기import React, { useEffect } from "react";import { useLocation } from "react-router-dom";export default function ScrollToTop() { const { pathname } = useLocation(); useEffect(() => { window.scrollTo(0, 0); }, [pathname]); return null;} 2.index.tsx에 붙이기 import React from "react";import ReactDOM from "react-dom/client";import { BrowserRouter } from "react-router..
