Im Bay

Routing react-router-dom 설치 npm i react-router-dom npm i -D @types/react-router-dom react-router-dom 라우터 타입(최상위) BrowserRouter HashRouter MemoryRouter 페이지 라우팅 Routes > Route Routes는 여러 개 둘 수 있다. React Router (Navigate & useNavigate) import import { Navigate, useNavigate } from 'react-router-dom'; 페이지 강제 이동 (forward/redirect) React Router (Nav) Link (페이지 링크) NavLink isActive callback 함수 제공 (child..

Component Styling 일반 CSS file (React defaults) CSS 파일 import 하여 사용 import ‘./App.css’; className=’xxx’ import styles from ‘./App.css’ className={styles.App} 또는 className={${styles.active} ${styles.bold}} CSS 모듈 import styles from ‘./App.module.css’; .xxx App_xxx__ (파일명_클래스_해시값) 클래스명 중복 방지 및 해당 컴포넌트에서만 사용된다. styled-components 모듈 const Ul = styled.list-style: none;...; ... ... const StyledCompo = ..

React Hooks - local storage localStorage localStorage란 브라우저의 데이터 저장 공간 (Web Storage) domain별 반 영구적으로 보관 가능 (만료기간 설정 불가, 직접 구현) key & value pair (모두 string 타입) 모두 동기적 처리 method getItem, setItem, removeItem, clear 예시 const data = {id: 1, name: 'Hong'}; localStorage.setItem('user', JSON.stringify(data)); JSON.parse(localStorage.getItem('user')); localStorage.removeItem('user'); localStorage.clear()..

React Hooks - useDeferredValue useDeferredValue(state)란 상태 값 변화에 낮은 우선 순위를 지정하기 위한 hook setState 완료하고 set useMemo와 함께 많이 사용된다. 기본형태 import { useDeferredValue } from ‘react’; const [str, setStr] = useState(’’); const deferredStr = useDeferredValue(str); React Hooks - useTransition useTransition(cb)란 상태 변화의 우선순위를 지정하기 위한 hook 모든 setState 완료하고 cb를 call 기본형태 import { useTransition } from ‘react’; co..

React Hooks - useReducer useReducer란 reduce란 기존(현재) 값을 바탕으로 추가 액션을 하는 것 reducer란 기존 값 각각에 해당 액션을 해주는 함수, 이전 상태와 액션을 합쳐서 새로운 상태를 만드는 조작 reducer란 같은 상태를 변경하는 함수들을 한 곳에 모아 놓은 것 dispatcher(action)은 action을 전달하는 함수 (Strict Mode에서는 2회 call) useReducer란 useState (컴포넌트 상태 관리에 쓰이는 hook)를 대체할 수 있는 함수이고 좀 더 복잡한 상태 관리가 필요할 때 사용한다. useReducer의 장점은 setter를 직접적으로 노출하지 않으면서 상태 변경하는 함수(reducer)를 컴포넌트 외부에 둘 수 있다...

React Hooks - useCallback useCallback이란 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용 (함수 cache) 메모화된 함수는 자식 컴포넌트에서 re-render시 재호출 방지 한 번만 생성되어야 하는 함수를 전달할 때 사용 사용 기본 형태 React Hooks - useMemo useMemo란 여기서 Memo는 memoization을 뜻하고 이전에 계산한 값을 메모리에 저장하여 동일한 계산의 반복 수행을 제거하여 실행 속도를 올리는 기술이다. 변수를 React Static 영역에 cache 메모화된 변수는 이제 주소가 변하지 않는다. 사용 import import { useMemo } from ‘react’; 기본 형태 const 메모화된_변수 = useMemo(()..

04 React - Routing Github Pages로 배포하기 배포 전 설정 cmd 창에서 프로젝트 폴더로 이동 후 npm i gh-pages -D package.json 파일의 “scripts” 블록 안에 "build” 바로 아래에 "deploy": "gh-pages -d dist" 추가 package.json "scripts": { "dev": "vite", "build": "tsc && vite build", "deploy": "gh-pages -d dist", // 추가! 배포 vite.config.ts 파일의 plugins: 바로 아래에 base: '/깃레포지토리이름/', 추가 vite.config.ts export default defineConfig({ plugins: [react()]..

04 React - Routing Router Hooks useOutletContext const outctx = useOutletContext(); useLocation & useParams const { id } = useParams(); const location = useLocation(); const state = location.state as { x: number }; useSearchParams const [searchParams, setSearchParams] = useSearchParams({}); Layout 하위 Route의 페이지 레이아웃 잡기

02 React Hooks memo memo란 component memoization 컴포넌트가 props로 동일한 결과를 랜더링하면 memo를 호출하고 결과를 memoizaing하여 성능 향상 (마지막으로 랜더링된 결과를 재사용) props 변화에만 영향을 주고 state, context가 변하면 재랜더링 기본 형태 memo(Component, (pre, curr) ⇒ !!cache); 두번째 함수가 true를 반환하면 cache 예시 memo(Component, () ⇒ true) 영원히 cache memo(Component, ({prop: a}, {prop: b}) ⇒ a === b); 이전 상태값과 현재 전달된 값이 같으면 useId 고유한 ID를 생성해주는 hook 변경될 수 있는 곳(key, ..

02 React Hooks useMemo useMemo란 여기서 Memo는 memoization을 뜻하고 이전에 계산한 값을 메모리에 저장하여 동일한 계산의 반복 수행을 제거하여 실행 속도를 올리는 기술이다. 변수를 React Static 영역에 cache 메모화된 변수는 이제 주소가 변하지 않는다. 사용 import import { useMemo } from ‘react’; 기본 형태 const 메모화된_변수 = useMemo(() => { 비용이_드는_코드; return 메모화할_값; }, [의존관계변수들]); useReducer useReducer란 reduce란 기존(현재) 값을 바탕으로 추가 액션을 하는 것 reducer란 기존 값 각각에 해당 액션을 해주는 함수, 이전 상태와 액션을 합쳐서 새..