개발천재

useContext 이해하기useContext는 React의 훅 중 하나로, Context API를 사용하여 컴포넌트 트리에서 값을 쉽게 전달할 수 있도록 도와준다. 일반적으로 부모 컴포넌트에서 Context를 Provider를 사용해 값을 전달하고, 하위 컴포넌트에서는 useContext로 이 값을 쉽게 가져올 수 있다. 주로 전역적인 상태(예: 테마, 로그인 상태 등)를 관리할 때 유용하다. Context는 컴포넌트 트리 전체에서 전역적으로 데이터를 공유할 수 있게 해준다. 하지만 사용은 신중하게 해야 한다. 너무 많은 데이터를 Context로 전달하면 성능 저하가 발생할 수 있기 때문이다.useContext는 값이 변경되면 해당 컴포넌트를 리렌더링한다. 이는 리액트의 기본 동작처럼 상태 값이 변경될..

중첩 라우팅 기본 개념리액트 라우터에서 중첩 라우팅 (Nested Routing)은 부모 컴포넌트 내에서 자식 컴포넌트를 렌더링하는 방식이다. 이를 통해 URL 경로에 따라 부모 컴포넌트와 자식 컴포넌트를 동시에 렌더링할 수 있다. 중첩 라우팅을 사용하면, 특정 경로가 일치할 때 부모 컴포넌트는 계속 렌더링되며, 자식 컴포넌트만 교체되는 형태로 UI를 구성할 수 있다.http://localhost:3000/about/memberhttp://localhost:3000/about/location  리액트 라우터의 중첩 라우팅은 주로 부모 컴포넌트에서 Outlet 컴포넌트를 사용하여 자식 컴포넌트가 렌더링될 자리(공간)를 마련한다. 자식 경로가 일치하면, 해당 경로에 맞는 자식 컴포넌트가 Outlet 위치에 ..

리액트 컴포넌트(Component) 개념정리컴포넌트는 리액트에서 가장 중요한 개념 중 하나이다. 리액트 애플리케이션은 컴포넌트(Component)로 구성되며, 각각의 페이지는 여러 컴포넌트의 조합으로 만들어진다. 간단히 말해, 컴포넌트는 특정 기능이나 UI를 담당하는 독립적인 코드 블록이다. 작은 컴포넌트를 조합하여 더 큰 컴포넌트를 만들고, 이렇게 만들어진 컴포넌트들이 모여 전체 애플리케이션을 구성한다. 리액트는 컴포넌트 기반 구조여서, 개발과 유지보수에서 많은 장점이 있다. 하나의 컴포넌트를 반복적으로 사용할 수 있기 때문에 개발 시간을 단축할 수 있다. 또한, 기능별로 컴포넌트를 분리하여 개발하면 코드의 가독성이 높아지고, 변경 사항이 생기더라도 특정 컴포넌트만 수정하면 되기 때문에 유지보수 비용이..

props 개념이해props는 prop이 여러개인것을 의미한다. 프롭은 property를 줄여서 쓴 것인데 '속성'이라는 뜻을 가지고 있다. 여기서의 속성은 컴포넌트의 속성을 의미한다. React의 props(properties)는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법이다. props를 사용하면 컴포넌트 간 재사용성과 유연성을 높일 수 있다. 또한 props는 읽기 전용(immutable) 이므로 자식 컴포넌트에서 직접 변경할 수 없다. props는 오직 부모에서 자식에게만 전달되며 객체 형태로 전달된다. (단방향 데이터 흐름) [ props의 특징] - 읽기 전용 : read-only 읽을 수만 있고 값을 변경할 수 없다.- 단방향 데이터 흐름 : 부모에서 자식에게만 전달된다.- 구..

리액트 라우터 v6에서는 Route 컴포넌트의 사용 방식이 v5와 달라졌다. element 속성을 사용하여 JSX를 전달하고, Route 컴포넌트에 닫는 태그 없이 바로 JSX를 넣는 방식으로 변경되었다. 또한, "404 페이지"와 같은 fallback 경로를 처리할 때는 path="*"을 사용한다.  path="*"를 사용한 404 페이지 설정가장 간단한 방법은 를 추가하여 404 페이지를 만들고, 존재하지 않는 경로로 이동할 경우 해당 페이지를 렌더링하는 것이다.// App.js import { BrowserRouter as Router, Routes, Route } from "react-router-dom";import HomePage from "./pages/HomePage";import Abou..

[Immer] Immer only supports setting array indices and the 'length' property at die (http://localhost:3000/static/js/bundle.js:40209:11)  at ...  오류발생원인이 오류는 Immer가 배열의 인덱스나 length 속성을 제외한 다른 속성을 직접 변경하려고 할 때 발생한다. Immer는 불변성 유지를 위해 내부적으로 동작하며, 배열의 구조를 변경하는 작업은 제한적으로만 허용된다.  Immer는 다음과 같은 작업은 허용한다.배열의 특정 인덱스 값 변경배열의 length 속성 변경배열에 요소를 추가하거나 제거 (push, pop, splice 등) 그러나 배열에 직접적으로 새 속성을 추가하려고 하면 오..

리액트 라우터(React Router)는 리액트 애플리케이션에서 페이지 간 이동을 관리하는 라이브러리이다. 리액트는 기본적으로 단일 페이지 애플리케이션(SPA) 구조로 동작하기 때문에, 페이지 내에서의 URL 변경을 브라우저의 기본 방식으로 처리하는 대신, 리액트 라우터를 사용해 URL을 제어한다. 리액트 라우터를 사용하면 애플리케이션 내에서 페이지 이동을 쉽게 할 수 있다.import React from 'react';import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';function Home() { return Home Page;}function About() { return About Page;}funct..

리액트에서 페이지 간 이동과 URL 관리는 매우 중요하다. 페이지 이동을 처리하기 위해 react-router-dom 라이브러리를 사용하는데 이 라이브러리는 페이지간 이동을 간편하게 처리할 수 있도록 다양한 기능을 제공한다. 그중에서도 useNavigate, useLocation, URLSearchParams는 경로 이동, 현재 위치 정보 확인, 쿼리스트링 관리 등을 효과적으로 수행할 수 있도록 도와주는 필수적인 도구이다.  useNavigateuseNavigate는 페이지 이동(네비게이션)을 수행하는 Hook이다. react-router-dom에서 제공하며, 특정 경로로 이동하거나 뒤로 가기 등의 기능을 수행할 수 있다.import { useNavigate } from "react-router-dom"..

Encountered two children with the same key, `1`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.  이 오류는 리액트에서 key 속성이 중복될 때 발생한다. 리액트는 컴포넌트 리스트를 렌더링할 때 각 항목을 고유하게 식별하기 위해 key 속성을 사용한다. 이를 통해 리액트는 항목의 변경, 추가, 삭제를 효율적으로 처리할 수 있는데 이 ..

firebase tool 설치하기리액트 프로젝트를 firebase 호스팅에 배포하기 위해서는 firebase CLI(Firebase 명령어 도구)를 설치해야한다. 설치는 터미널에서 아래 명령어를 실행해서 설치할 수 있다.npm install -g firebase-tools  아래 명령어를 입력하여 firebase에 로그인하고, 질문이 나오면 n을 입력하고 엔터를 누른다.firebase 프로젝트에 접근하려면 로그인을 해야하는데 아래 명령어를 실행하면 구글 계정으로 로그인할 수 있다. firebase loginAllow Firebase to collect CLI and Emulator Suite usage and error reporting information? (Y/n) n웹사이트 창이 열리면서 계정을 ..