벼락치기 블로그

useMemo 는 재렌더링 사이에 계산 결과를 캐싱할 수 있게 해주는 React Hook 입니다.풀이: 즉, 이전 렌더링과 현재 렌더링 사이에서 값을 기억하고, 의존성이 변경되지 않으면 기존 결과를 재사용한다는 뜻!

HMR(Hot Module Replacement)은 코드 변경 시 전체 페이지를 새로고침하지 않고 변경된 모듈만 즉시 업데이트하는 기능임주로 React, Vite, Webpack 같은 개발 환경에서 사용됨. - 빠른 개발 속도- 상태 유지 (새로고침 없이 UI만 갱신)- 효율적인 리소스 관리

useEffect(effect) → 매 렌더링마다 실행됨useEffect(effect, []) → 마운트될 때 한 번만 실행됨useEffect(effect, [value]) → value 값이 변경될 때만 실행됨

React Recoil을 사용하는 주요 이유간단한 전역 상태 관리: 기존 React에서는 여러 컴포넌트 간에 상태를 공유하려면 상위 컴포넌트로 상태를 끌어올리는 등의 복잡한 작업이 필요. Recoil은 로컬 상태처럼 간단한 get/set 인터페이스로 전역 상태를 관리할 수 있도록 도와줌.불필요한 렌더링 최소화: 상위 컴포넌트에서 상태를 관리하면 트리 전체에 걸쳐 불필요한 리렌더링이 발생할 수 있는데, Recoil은 상태 변화가 필요한 부분만 업데이트하여 성능을 향상.코드 분할과 모듈화: 상태 정의가 분산되어 있어, 필요한 시점에만 로드할 수 있으므로 코드 분할이 용이하고 애플리케이션 유지보수가 쉬워짐.최신 React 기능과의 호환: React의 동시성 모드(Concurrent Mode) 등 최신 기능과도..

Unsplash Image API를 활용한 이미지 검색 사이트 구축 ### 개발환경1.  프로젝트 환경설정(vite를 활용한 React 설치): `npm install vite@latest`2.  React 중앙집중식 상태관리 라이브러리 Recoil 설치: `npm install recoil`3.  외부 오픈 API 통신을 위한 라이브러리 Axios 설치: `npm install axios` 4.  CSS 스타일링을 위한 SASS/SCSS 설치: `npm install -D sass`5.  React Router 설치: `npm install react-router-dom localforage match-sorter sort-by`6.  TypeScript에서 Node.js 모듈을 쓸 수 있는 환경 구축..

사용import toast, { toastConfig } from 'react-simple-toasts';import 'react-simple-toasts/dist/style.css';import 'react-simple-toasts/dist/theme/dark.css';toastConfig({ theme: 'dark' });function MyComponent() { return toast('Your toast is ready! 🍞')}>Show Toast;}

- recoil : React 애플리케이션에서 전역 상태 관리를 쉽게 할 수 있도록 도와주는 라이브러리- atoms : 기본 상태관리 대상(상태저장), 여러 컴포넌트에서 공유 가능 useRecoilState(atom): atom의 값을 읽고 업데이트할 수 있도록 [value, setValue] 형태의 배열을 반환useRecoilValue(atom): 읽기 전용으로 atom의 값을 가져올 때 사용]useSetRecoilState(atom): setter 함수만 필요할 때 사용useResetRecoilState(atom): atom의 값을 초기값으로 리셋할 때 사용 - selectors : atom을 기반으로 중복되는 계산 로직을 관리해주는 "파생상태"useRecoilValue(selector): selec..

useState를 이용하여 상태 변경시- 리액트가 자동적으로 UI에 업데이트 해준다.- virtual dom을 사용해 변경된 부분만 렌더링

규칙- 컴포넌트 첫문자는 대문자로 시작하자