Im Bay

Storybook 사용 Storybook 설치 cmd 프로젝트 위치에서 npx storybook@latest init http://localhost:6006/ 접속 후 확인 Storybook tailwind 적용 .storybook 폴더- previews.ts 파일 안에 import '../src/index.css'; import 하기 previews.ts import type { Preview } from '@storybook/react'; **import '../src/index.css'; // 추가!** const preview: Preview = { index.css (파일 안에 tailwind가 있어야 함) @tailwind base; @tailwind components; @tailwind u..

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(()..

React Hooks - useEffect useEffect란 컴포넌트가 랜더링 될 때 특정 작업(side effect)을 실행할 수 있도록 하는 것 side effect란 컴포넌트가 랜더링 된 이후에 비동기로 처리되어야 하는 부수적인 효과 componentDidMount 시점에 비동기로 실행 (alert, focus, sound 등 After DOM 처리) 함수형 컴포넌트에서 return JSX(render) 다음에 실행 정리(clean-up) 코드는 componentWillUnMount 시점에 실행되고, 의존 관계 배열(Dependency Array)가 비워져 있다면 1회만 실행 된다. import import { useEffect } from ‘react’; 사용 기본 형태 // 기본 useEffe..

React Hooks - useContext useContext란 상태를 공유하는 context (상태 변경 시 모두 다시 랜더링) context는 App 안에서 전역적으로 데이터를 여러 컴포넌트끼리 쉽게 공유할 수 있는 방법 제공 상위 컴포넌트의 data가 필요한 하위 컴포넌트들은 useContext 훅을 사용하여 데이터를 받아온다. Provider로 부터 Consumer까지 value(state) 공유 Provider의 자식들은 해당 context의 상태를 바로 접근 가능 createContext → Context.Provider → Context.Consumer (useContext) import import { createContext } from ‘react’; import { useContex..

React Hooks - forwardRef forwardRef란 useRef로 부모 컴포넌트에서 외부(자식) 컴포넌트의 DOM 접근할 때 사용 부모에서 선언→ 자신에게 전달→ 자식에서 참조걸기→ 부모에서 컨트롤 import import { forwardRef, useRef } from ‘react’; 사용 예시 App.js에서 const 변수명1 = useRef(); 생성 하위 컴포넌트인 Header 컴포넌트로 전달 Header 컴포넌트에서 const 변수명2 = forwardRef((props, 변수명1) ⇒ { … } ); 생성 그 외 사용 예시 const Header = ({...props}, headerRef) { return ( ); }; export deafult forwardRef(Head..