반응형 일상이 개발111 React 고급 Hook 완전정복｜useRef, useMemo, useCallback 실전 사용법 & 최적화 전략 📘 리액트 스터디 시리즈 10편고급 Hook 완전정복｜useRef, useMemo, useCallback의 모든 것이제 리액트도 어느 정도 익숙해지셨죠? 👨💻 이번 편에서는 고급 Hook 3총사 – useRef, useMemo, useCallback에 대해 배워봅니다.렌더링 최적화, DOM 직접 접근, 계산 결과 캐싱 등 실전에서 성능과 효율을 챙기려면 꼭 필요한 친구들입니다! 🔧🔍 1. useRef – DOM에 직접 접근하기useRef는 DOM 요소에 직접 접근하거나, 렌더링과 무관한 값을 저장할 때 사용합니다.import { useRef } from 'react';function InputFocus() { const inputRef = useRef(null); const handleCl.. 2025. 7. 8. React Context API 완전정복｜컴포넌트 간 전역 상태 공유 & useContext 실전 예제 📘 리액트 스터디 시리즈 9편Context API 완전정복｜컴포넌트 간 전역 상태 공유하기안녕하세요! 이번 편에서는 컴포넌트 간 전역 상태를 공유할 수 있는 Context API에 대해 배웁니다 🎯prop drilling 없이 상위 → 하위로 데이터 전달하는 강력한 방법! Redux를 쓰지 않고도 충분한 상황에서 아주 유용하게 쓰입니다 💡🔧 1. Context란 무엇인가요?Context는 리액트에서 컴포넌트 트리 안에서 전역으로 데이터를 전달할 수 있게 해주는 API입니다.const MyContext = React.createContext(defaultValue);Context를 사용하면 props 없이도 깊은 컴포넌트 트리까지 값을 전달할 수 있습니다.📦 2. Context 기본 사용법다음은 .. 2025. 7. 7. React Router 사용법 완전정복｜SPA에서 페이지 전환 구현하기 (기초부터 실전까지) 📘 리액트 스터디 시리즈 8편React Router로 페이지 구성하기｜SPA에서 라우팅 처리하는 법안녕하세요! 이번 편에서는 React Router를 이용해페이지 이동을 구현해볼 거예요 🚦React는 기본적으로 SPA(Single Page Application) 구조라서, URL을 바꿔도 전체 페이지를 새로고침하지 않고 컴포넌트만 바꿔주는 방식을 사용합니다.🔧 1. React Router 설치하기npm install react-router-dom✅ 설치가 완료되면 react-router-dom 패키지를 import 해서 사용합니다.🗺️ 2. 기본 구조 이해하기리액트 라우터는 다음과 같은 구조로 사용됩니다:import { BrowserRouter, Routes, Route } from 'react-.. 2025. 7. 6. React 폼 처리 완전정복｜Controlled Component로 입력과 제출까지 완성하기 📘 리액트 스터디 시리즈 7편폼 입력과 Controlled Component 완전정복｜React로 사용자 입력 처리하기안녕하세요! 오늘은 사용자 입력을 다루는 방법, 즉 폼 처리와 Controlled Component를 배워봅니다 ✍️텍스트 입력, 체크박스, 셀렉트박스 등 모든 입력 UI를 리액트에서 다루는 실전 핵심 개념이에요!📥 Controlled Component란?입력값(value)이 컴포넌트의 상태(state)에 의해 제어되는 input 요소를 Controlled Component라고 합니다.즉, 사용자의 입력 → setState → 화면 렌더링 → 상태가 바뀜 → input value 갱신import { useState } from 'react';function NameInput() { .. 2025. 7. 5. React useEffect 완전정복｜렌더링 후 실행, 상태 변화 감지, 클린업까지 한눈에 📘 리액트 스터디 시리즈 6편useEffect 완전 이해하기｜React의 사이드 이펙트와 라이프사이클안녕하세요! 오늘은 React에서 외부 작업을 처리할 수 있게 해주는 useEffect훅에 대해 배워봅니다 🧪API 호출, 타이머 설정, 로컬 저장소 접근 등은 모두 "사이드 이펙트(Side Effect)"이며, React의 렌더링 사이클과 연계해서 제어해야 합니다.⚡ useEffect란 무엇인가요?useEffect는 리액트 컴포넌트가 렌더링된 이후 실행되는 Effect Hook입니다.import { useEffect } from 'react';useEffect(() => { // 여기에 실행할 코드 작성}, []);✅ 컴포넌트가 마운트(처음 렌더링)되었을 때 실행✅ 의존성 배열에 따라 업데이트될 때.. 2025. 7. 4. 리액트 리스트 & 조건부 렌더링｜map(), 삼항 연산자 실전 예제로 쉽게 배우기 📘 리액트 스터디 시리즈 5편리스트 렌더링 & 조건부 렌더링｜React로 유동적인 UI 만들기안녕하세요! 오늘은 리액트에서 리스트를 출력하는 방법과 조건에 따라 UI를 다르게 보여주는 방법을 배워봅니다 😊이제부터는 데이터에 따라 동적으로 화면을 구성할 수 있어요!🔁 리스트 렌더링 (map 사용)React에서는 배열.map()을 이용해 컴포넌트를 반복 출력합니다.const items = ['사과', '바나나', '포도'];function ItemList() { return ( {items.map((item, index) => ( {item} ))} );}✅ 각 요소를 li로 렌더링✅ key는 각 항목의 고유값 (index는 임시로 사용 가능)🎯 주의:.. 2025. 7. 3. 이전 1 2 3 4 ··· 19 다음 반응형
