NewBean의 웹과 콩나무
public 폴더에서 이미지 가져오기 1. public 폴더 리액트 프로젝트를 하는 도중, 이미지 파일을 많이 불러와야 하는 상황이 발생하는 경우가 있습니다. import로 이미지를 불러오니, 너무 많은 코드가 작성되고 심지어 지저분합니다.. import로 불러오는 방식 대신 public 폴더에 이미지 파일들을 옮긴 후, 불러오겠습니다! 그 전에, public 폴더에 대해 알아봅시다. public 폴더란? 정적 자산을 호스팅하기 위한 장소입니다. 이 폴더의 파일들은 빌드 프로세스에서 변경되지 않고, 그대로 유지됩니다. CSS 파일, 이미지, 폰트 등의 정적 자산들은 public 폴더에 위치할 수 있습니다. 2. public 폴더에서 이미지 가져오기 그럼 이제, public 폴더에서 이미지를 가져와 봅시다..
React 프로젝트 빌드하는 법 1. React 프로젝트 빌드 - #1. vsCode에서 터미널에 들어간 후, npm run build라고 입력 - #2. 생성된 build 파일을 미리 만들어 놓은 깃허브 repository에 넣음
immer 1. immer - React와 함께 사용되며, JavaScript에서 불변성을 관리하기 위한 라이브러리 중 하나 - 상태 관리 및 업데이트를 보다 간편하게 만들어줌 - 불변성을 지키면서 상태 업데이트 가능 2. 사용방법 ※ immer 사용 시, 설치 필요 (npm install immer or yarn add immer) - produce 함수를 사용하여, 업데이트할 데이터를 전달하고, 업데이트할 내용을 함수 안에서 변경함 const userState = { name: 'Kim', age: 15, }; const newState = userState(state, (draft) => { draft.age += 1; }); console.log(newState); - 중첩된 객체와 배열의 업데이..
React 프로젝트 생성 원하는 프로젝트에서 cmd에 들어간 후, npx create-react-app 프로젝트명 입력
useParams 1. useParams - React 애플리케이션에서 동적 URL 파라미터를 추출하는데 사용되는 훅 - 사용자 정의 데이터를 전달하는 데 유용 - 이를 통해, 블로그 게시물 ID or username과 같은 정보를 URL에 포함시킬 수 있음
NavLink 1. NavLink - React Router에서 제공하는 컴포넌트 - 네비게이션 메뉴 or 링크를 만들 때 사용함 2. 예시 - RouterEx.js - NavLink에서 to로 이동할 URL을 지정 import React from "react"; import { Routes, Route, Navigate, useLocation, NavLink, } from "react-router-dom"; function HomeMainPage() { return ( Home, Main ); } function HomeAboutPage() { return ( HOME, ABOUT ); } export default function RouterEx() { const location = useLocati..
