반응형 리액트기초4 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 useEffect 완벽 정리: 의존성 배열부터 클린업까지 이해하기 ⚛️ React useEffect 완벽 정리: 의존성 배열부터 클린업까지 이해하기React를 조금만 써보면 useEffect를 만나게 됩니다. 하지만 이 훅은 처음엔 조금 헷갈릴 수 있어요. 실행 시점, 의존성 배열, 클린업(cleanup) 등 알아야 할 개념이 많거든요.이 글에서는 useEffect를 처음부터 끝까지 완벽하게 이해할 수 있도록 설명합니다. 실무에 바로 적용 가능한 팁도 함께 담았어요.🔍 useEffect란?useEffect는 React에서 컴포넌트가 렌더링된 이후 실행되는 함수입니다. 비동기 통신, 타이머 설정, 이벤트 리스너 등록 등 부수 효과(side effect)를 처리할 때 사용돼요.useEffect(() => { // side effect (API 호출, 이벤트 등록 등)}.. 2025. 4. 5. React의 핵심, props vs state: 언제, 왜, 어떻게 사용할까? ⚛️ React의 핵심, props vs state: 언제, 왜, 어떻게 사용할까?React를 조금만 공부해 보면 반드시 마주치는 개념 두 가지가 있어요.props와 state이 둘은 컴포넌트 사이의 데이터 흐름과 내부 상태 관리를 다루는 핵심 개념입니다.처음엔 비슷하게 느껴질 수 있지만, 역할과 사용 시점이 완전히 다르기 때문에 정확하게 구분해서 이해하는 것이 중요해요.📦 props란 무엇인가요?props(프로퍼티)는 부모 컴포넌트가 자식 컴포넌트에게 전달하는 읽기 전용(Read-only) 데이터입니다.즉, 컴포넌트 간 데이터 전달용 통로 역할을 하죠.✅ 예시// 부모 컴포넌트function Welcome() { return ;}// 자식 컴포넌트function Greeting(props) { r.. 2025. 4. 4. 이전 1 다음 반응형
