React

📌 상황프로젝트를 진행하면서 react-helmet 을 사용해 메타 태그를 동적으로 제어하고 있었는데, 계속 똑같은 경고 메시지가 떴다. 🔍 문제 분석이 경고 메시지는 "componentWillMount 를 React 의 엄격 모드에서 사용하면 버그가 나타날 수 있다" 는 의미였다.구글링을 해보니, 이 문제는 react-helmet-async 를 사용하면 해결되는 문제였다. 기존에는 react-helmet 을 이용해 컴포넌트를 사용하여 메타 태그를 설정하고 있었는데, react-helmet-async 를 사용하지 않아서 경고 메시지가 떴던 것이다.import { Helmet } from 'react-helmet'// HTML 문서의 메타 태그를 설정하여 SEO 와 페이지 정보를 제공하는 컴포넌트co..

📌 상황프로젝트에서 Zustand 를 이용해 다크모드 기능을 구현하던 중, 현재 경로 정보를 가져오기 위해 useLocation() 훅을 사용하려고 했는데 다음과 같은 에러 메시지를 접하게 됐다.Uncaught Error: useLocation() may be used only in the context of a component 🔍 문제 분석번역을 해보니 "useLocation() 은 컴포넌트의 컨텍스트에서만 사용될 수 있습니다." 라는 의미였다.관련 문서를 찾아보니, 이 문제는 useLocation() 훅이 Router 컴포넌트의 자식으로 존재하지 않을 때 발생하는 오류였다. 나는 RouterProvider 를 사용해서 라우터를 관리하고 있었고, 아래와 같이 ThemeSwitcher 컴포넌트에..

❓ React.lazyReact.lazy 는 컴포넌트를 동적으로 불러오기 위해 사용되는 함수이다.이 함수는 컴포넌트를 import 해서 받아오고, 이걸 지연시켜서 로드할 수 있게 해준다. 쉽게 말하자면, lazy 는 게으르다는 뜻으로 실제로 컴포넌트가 필요할 때까지 로드를 미루는 역할을 한다.예를 들어, 웹사이트에 여러 페이지가 있을 때, 사용자가 처음 들어올 때 모든 페이지를 한 번에 불러오는 게 아니라! 실제로 필요한 페이지나 컴포넌트만 불러오게 함으로써 초기 로딩 시간을 줄여준다.이렇게 하면 사용자에게 더 빠른 경험을 제공할 수 있다. ❗️사용법 예시import React, { lazy } from 'react'const Home = lazy(() => import('@pages/home/Home...

❓ AliasAlias 는 "별명" 으로 번역된다.번역 그대로, Alias 는 긴 파일 경로를 → 짧고 기억하기 쉬운 별명으로 대체하여 접근할 수 있게 해주는 기능이다. 예시를 보자!기존에는 컴포넌트나 모듈을 불러올 때 이런 식으로 상대 경로를 사용했다. 이 방식은 파일 경로가 길어지거나 깊어질수록 가독성이 떨어질 뿐만 아니라, 파일 위치가 변경되면 경로를 일일이 수정해야 하는 불편함이 있다. import Header from '../../common/components/header/Header.jsx' 하지만, alias 를 사용하면? 특정 디렉토리 경로에 대해 짧고 직관적은 별칭을 설정하여, 간단한 경로로 불러올 수 있다. import Header from '@common/components/head..

https://reactrouter.com/en/main Home v6.26.2 | React Router reactrouter.com❓ React RouterReact Router 는 리액트에서 URL을 기반으로 컴포넌트를 나누고 페이지를 관리할 수 있게 해주는 라이브러리다.리액트는 기본적으로 SPA(Single Page Application) 구조를 따르기 때문에페이지를 이동하더라도 전체 페이지가 새로 로드되는 것이 아니라, URL 이 바뀌면서 화면에 보여주는 컴포넌트만 교체된다. 이러한 구조에서 React Router 를 사용하면, URL 이 바뀔 때 그 URL 에 맞는 특정 컴포넌트만 변경해서,마치 새로운 페이지로 이동하는 것처럼 자연스러운 전환을 만들어낼 수 있다.예를 들어, /home 경로에서..

❓ 컴포넌트리액트로 만든 페이지는 컴포넌트로 구성되어 있고, 함수형 컴포넌트이다.component 를 번역하면 "요소" 라고 번역해 준다.즉, 함수형 컴포넌트는 함수로 작성된 요소라고 할 수 있다. 이러한 컴포넌트들을 조립해서 페이지를 구성하는데,이렇게 조립해서 사용하면 비슷한 부분들은 다른 페이지에서 코드를 재사용할 수도 있고 유지보수도 쉬워진다.++) 모든 컴포넌트는 대문자로 시작한다.  ❗ 컴포넌트 생성컴포넌트를 생성할 때, 일반적으로 return 문에서 div 로 감싸주며, 빈 태그 로 감싸는 것도 가능하다.그리고 컴포넌트를 외부에서 사용할 수 있도록 export default 를 이용해서 내보낸다.이를 통해 다른 파일에서 import 하여 사용할 수 있다.// Hello.jsxconst Hel..