본문 바로가기

JavaScript/React28

useRef, useImperativeHandle useRef1. useRef란?React의 상태(useState)와는 다르게 리렌더링 없이 값을 저장할 수 있는 Hook.DOM 요소에 직접 접근하거나, 이전 값을 저장할 때 사용됨.값이 변경되어도 컴포넌트가 리렌더링되지 않음.2. useRef 기본 문법import { useRef } from "react";const Example = () => { const inputRef = useRef(null); // 초기값 설정 const focusInput = () => { inputRef.current.focus(); // input에 포커스 적용 }; return ( 포커스 );};export default Example;useRef를 사용하면 input 요.. 2025. 3. 21.
useEffect, useLayoutEffect, useInsertionEffect useEffectuseEffect는 React에서 컴포넌트의 생명주기를 다룰 수 있는 Hook으로, 사이드 이펙트(Side Effects)를 처리하는 역할을 합니다.1. useEffect의 역할비동기 API 요청 (데이터 패칭)이벤트 리스너 등록 및 해제DOM 조작 (클래스 추가, 애니메이션 등)타이머 설정 및 정리 (setTimeout, setInterval)컴포넌트가 마운트/언마운트될 때 특정 로직 실행2. useEffect 기본 문법1) 기본적인 사용 (마운트 시 실행)import { useEffect } from "react";const Example = () => { useEffect(() => { console.log("✅ 컴포넌트가 마운트됨!"); }, []); // 빈 배열 [] .. 2025. 3. 21.
React Router DOM React에서 페이지 이동 방법페이지 전환이 필요한 경우 react-router-dom을 사용하는 것이 가장 좋습니다.1. React Router (react-router-dom)React에서 페이지 이동을 구현하는 표준 라이브러리.설치npm install react-router-dom기본 사용법import { BrowserRouter, Routes, Route, Link } from "react-router-dom";const Home = () => 홈 페이지;const About = () => 소개 페이지;const App = () => { return ( 홈 | 소개 } /> } /> );};expor.. 2025. 3. 21.
React 기본 개념 1. JSX (JavaScript XML)JSX는 JavaScript에서 HTML을 작성할 수 있는 문법.React에서 UI를 선언적으로 표현할 때 사용.1️⃣ JSX 기본 문법JSX는 HTML과 유사하지만, JavaScript 표현식을 {} 안에 포함할 수 있습니다.const name = "희성";const element = Hello, {name}!;ReactDOM.render(element, document.getElementById("root"));HTML과 차이점class → className 사용onclick → onClick (camelCase로 작성)JavaScript 코드 사용 시 {} 중괄호로 감싸야 함2️⃣ JSX에서 속성 사용하기className (HTML의 class 대신 사용)c.. 2025. 3. 21.
React 프로그래밍을 위한 javascript 기본 ES6+ 문법 let과 constES6에서는 var 대신 블록 스코프를 가지는 let과 불변 변수인 const가 추가됨.let x = 10;x = 20; // 가능const y = 30;y = 40; // 에러 (const는 재할당 불가능)let → 재할당 가능const → 재할당 불가능화살표 함수 (()=>{})ES6에서 함수 선언을 간결하게 표현하는 방법.// 일반 함수 표현식function add(a, b) { return a + b;}// 화살표 함수const add = (a, b) => a + b;console.log(add(2, 3)); // 5특징return을 생략 가능 (한 줄 코드일 때)this가 기존 함수와 다르게 동작 (lexical this)const obj = { value.. 2025. 3. 21.
서버 트래픽 비용을 줄이고 싶을 때, Squoosh https://squoosh.app/ SquooshSimple Open your image, inspect the differences, then save instantly. Feeling adventurous? Adjust the settings for even smaller files.squoosh.appSquoosh란? Google Chrome Labs에서 개발한 웹 기반 이미지 압축 및 변환 도구웹 브라우저에서 직접 실행되며, 이미지 품질을 유지하면서 파일 크기를 줄이는 것이 특징주요 기능이미지 압축 (Lossy & Lossless)JPEG, PNG, WebP, AVIF 등 다양한 포맷으로 변환 가능압축률을 조절하여 화질과 파일 크기 균형 맞춤실시간 비교 (Before & After)슬라이더를 움.. 2025. 3. 6.
[React] function - export가 없는 경우, export가 있는 경우: export, export default의 차이 export가 없는 경우, export가 있는 경우: export, export default의 차이export가 없는 경우exportexport default모듈의 내부에서만 사용 가능여러 개의 이름 있는 항목을 내보낼 수 있다.모듈당 하나의 기본 내보내기를 지정할 수 있다. import할 때는 반드시 해당 이름을 사용import할 때는 원하는 이름으로 사용export가 없는 경우, 해당 함수는 모듈의 내부에서만 사용 가능하며, 외부에서 접근할 수 없다.export가 있는 경우,export 키워드를 사용하면 해당 함수가 모듈의 외부에서 접근 가능하다는 것을 의미. // file-A.jsexport function Component() { ... }다른 파일이나 모듈에서 이 함수를 import하여 사용할.. 2025. 1. 12.
[React] React Hook[State, Effect, Ref, Context, Memo, Callback, Reducer, customHook] useStateconst [현재 상태, 상태 변경] = useState(초기값)무거운 작업을 하는 초기 값을 콜백함수로 불러오면 최초 한 번만 값을 불러온다.import React from 'react';import { useState } from 'react';// state: 컴포넌트의 상태// const [현재 상태, 상태 변경] = useState(초기값)const heavyWork = () => { console.log('무거운 작업'); return ['홍길동', '고길동'];};export default function useStateHooks() { // 클릭 시 시간 증가 시키기 const [time, setTime] = useState(1); const handleClick =.. 2025. 1. 11.
[React] react.dev > react 빠르게 시작하기 먼저 vite를 이용해서 리엑트를 설치했다.npm create vite@latest ./이후 react와 js를 선택했다. 최초 폴더구조는 사진과 달라서 정리하기 쉽도록 사진처럼 구조를 바꿔 주었다.react 흐름: index.html -> main.jsx (or index.jsx) -> App.jsx import { StrictMode } from 'react';import { createRoot } from 'react-dom/client';import './styles/index.css';import App from './App';createRoot(document.getElementById('root')).render( ,);import './styles/App.. 2025. 1. 10.

티스토리툴바