Do it

(기본 설정)react-router-dom의 기능을 사용하려는 모든 컴포넌트들은 이 컴포넌트 내부에 있어야 합니다.보통 애플리케이션의 최상위 (예: index.js 또는 App.js의 최상단)에서 앱 전체를 감싸는 형태로 사용합니다. HTML5 History API를 사용하여 URL과 UI를 동기화합니다.여러 개의 컴포넌트를 감싸는 컨테이너 역할을 합니다.현재 브라우저의 URL 경로를 보고, 자식 컴포넌트들 중에서 경로가 일치하는 첫 번째 의 element를 렌더링합니다. (v5의 와 유사한 역할)특정 URL 경로(path)와 해당 경로에서 보여줄 React 컴포넌트(element)를 연결(매핑)하는 역할을 합니다.주요 Props:path: 매칭시킬 URL 경로 문자열 (예: /, /about, /..

1. Context란?Context는 React에서 전역적인 데이터(예: 사용자 정보, 테마, 언어 설정 등)를 컴포넌트 트리 전체에 쉽게 전달할 수 있도록 해줍니다.즉, 여러 단계의 props 전달 없이도, 한 번 Provider로 값을 설정해두면, 해당 Provider 아래의 모든 컴포넌트가 직접 접근할 수 있게 만드는 방식입니다.2. 왜 Context를 사용해야 할까?Prop Drilling 해결: 상위 컴포넌트에서 하위 컴포넌트로 데이터 전달 시 중간 컴포넌트들이 불필요하게 props를 받아야 하는 것을 방지합니다.전역 상태 관리: 간단한 전역 상태나 설정, 테마, 인증 정보 등을 여러 컴포넌트에 쉽게 제공할 수 있습니다.유지보수 용이성: 한 곳에서 값의 변경을 관리하기 때문에, 여러 컴포넌트에서..

React.memo개념 설명: React.memo는 컴포넌트의 결과물을 메모이제이션(memoization)해 두었다가, 같은 props로 다시 렌더링하려고 하면 기존 결과를 재사용하는 기능입니다. 쉽게 말해 컴포넌트를 기억해두는 것이라고 할 수 있어요. 원래 리액트에서는 부모 컴포넌트가 업데이트되면 자식 컴포넌트도 다시 렌더링되는데, React.memo로 래핑한 컴포넌트는 전달된 props가 이전과 똑같다면 다시 렌더링하지 않고 넘어갑니다. (React.memo는 전달받은 props를 얕은(shallow) 비교를 통해 판단합니다.) 이런 방식으로 변경되지 않은 부분의 불필요한 재렌더링을 건너뛰어 성능을 최적화할 수 있습니다. (React.memo는 클래스 컴포넌트의 PureComponent와 비슷한 역할..

1. 컴포넌트가 마운트될 때초기 실행 및 상태 생성컴포넌트가 처음 렌더링될 때, useReducer는 두 개의 인자—reducer 함수와 initialState—를 받아 초기 상태를 설정합니다.이때, reducer 함수는 바로 호출되지 않고, 초기 상태가 그대로 반환됩니다.useReducer는 배열 [state, dispatch]를 리턴하는데, 여기서 state는 초기 상태, dispatch는 나중에 액션을 보낼 때 사용하는 함수입니다.예시 코드:const [state, dispatch] = useReducer(reducer, initialState);동작 순서 1:컴포넌트 마운트 → useReducer 호출 → 초기 상태(initialState) 설정 → [state, dispatch] 반환 → 컴포넌..

1. 왜 useReducer가 등장했을까?1.1 복잡한 상태 로직 관리 문제여러 useState의 한계:상태 업데이트 로직이 복잡해지면 여러 개의 useState를 사용해 상태를 나눠 관리하는 것이 코드 복잡도를 증가시키고, 변경 사항을 관리하기 어려워집니다.상태 업데이트 로직의 캡슐화 필요:여러 상태를 하나의 객체로 관리하면서, 특정 액션에 따라 상태를 어떻게 업데이트할지에 대한 로직을 분리하면 더 깔끔한 코드 유지보수가 가능합니다.1.2 리듀서 패턴의 도입리듀서 패턴이란?리듀서 패턴은 상태(state)와 액션(action)을 인자로 받아 새로운 상태를 반환하는 순수 함수 개념입니다. 이 패턴은 Redux 등 전역 상태 관리 라이브러리에서도 핵심 원리로 사용됩니다.useReducer의 등장:useRed..

1. useEffect 기본 사용법useEffect는 컴포넌트가 렌더링된 후 실행되는 함수입니다.예를 들어, 다음 코드는 컴포넌트가 렌더링될 때마다 콘솔 로그를 출력합니다.import React, { useEffect } from 'react';function MyComponent() { useEffect(() => { console.log('컴포넌트가 렌더링되었습니다.'); }); // 의존성 배열이 없으므로 매 렌더마다 실행됨 return Hello, World!;}export default MyComponent;특징:의존성 배열이 없는 경우, 모든 렌더마다 useEffect가 실행됩니다.2. 마운트 시 한 번만 실행하기 (componentDidMount)만약 컴포넌트가 처음 마운트될 때 ..

물론이죠! 아래에 티스토리 스타일의 포스팅으로 깔끔하게 정리해드렸어요. 코드 블럭과 설명이 어우러지도록 구성했고, useRef와 전역 변수의 활용에 대한 흐름도 자연스럽게 이어지게 작성했습니다.✅ useRef 꼭 써야 하는 이유와 전역 변수 활용 시 주의할 점React 컴포넌트를 작성하다 보면 상태를 저장할 때 let, useState, useRef 중 어떤 걸 써야 할지 헷갈릴 수 있어요.특히 리렌더링과 관련된 값의 유지, DOM 접근 여부에 따라 적절한 선택이 필요합니다.이번 글에서는 useRef가 필요한 이유와 컴포넌트 바깥에서 변수를 선언할 때 주의할 점까지 함께 정리해봅니다.✅ 1. useRef를 써야 하는 대표적인 3가지 상황🔹 1) 컴포넌트가 리렌더링돼도 값이 유지되어야 할 때let cou..

React에서 컴포넌트에 데이터를 전달할 때 props를 사용합니다.함수에 인자를 전달하는 것과 비슷한 개념이에요.function greet(name) { console.log("Hello", name);}→ 위 코드처럼 React 컴포넌트에도 값을 "인자"처럼 전달할 수 있어요!✅ 1. props란 무엇인가?props는 "properties"의 줄임말입니다.부모 컴포넌트가 자식 컴포넌트에 값을 전달할 때 사용합니다.컴포넌트는 props를 함수의 인자처럼 받아서 사용할 수 있어요.✅ 2. props 기본 예제function Greeting(props) { return Hello, {props.name}!;}✅ 3. props의 디폴트 값 설정 (React 19 방식)React 18까지는 default..

1. 🔄 JSX 중괄호 안에는 JavaScript 표현식만 가능중괄호 {} 안에는 반드시 **값으로 평가될 수 있는 JavaScript 표현식(expression)**만 들어가야 합니다.✅ 예시:const name = "Teo";return {name}; // ✅ 출력: Teo❌ 잘못된 예시:return {if (true) { return 'Hi'; }}; // ❌ 오류 발생2. 🚫 Boolean, null, undefined, 객체는 화면에 렌더링되지 않음숫자, 문자열, 배열은 출력 가능하지만, true, null, undefined, 객체는 화면에 나타나지 않습니다.✅ 예시:{123} // ✅ 출력: 123{'Hello'} // ✅ 출력: Hello{[1, 2, 3]} // ..

⚛️ Key Features of ReactComponent-based UIReact breaks the UI into reusable components, making your code more modular and maintainable.Easy to implement UI updatesReact allows you to update the view declaratively based on the state, making UI updates intuitive.Fast renderingReact is optimized for speed using techniques like the Virtual DOM, minimizing direct DOM manipulation.🌐 Critical Renderin..