분류 전체보기46 [React] React-Hooks 간단 정리 (2) 대표적인 최적화 React-Hooks리-렌더링의 발생 조건컴포넌트에서 state가 바뀌었을 때컴포넌트가 내려받은 props가 변경되었을 때부모 컴포넌트가 리-렌더링 된 경우 자식 컴포넌트는 모두리액트에서 불필요한 렌더링이 발생하지 않도록 최적화하는 대표적인 방법memo(React.memo) : 컴포넌트를 메모이제이션(memoization)useCallback : 함수를 메모이제이션(memoization)useMemo : 함수가 리턴하는 값을 메모이제이션(memoization) •React.memo 부모가 리렌더링 되면 자식은 모두 리렌더링 됩니다.1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484.. 2024. 7. 3. [React] React-Hooks 간단 정리 (1) 대표적인 React-Hooks• useState12345678910111213141516171819202122232425// 기존에 우리가 사용하던 일반 방식setState(number + 1); // 함수형 업데이트 setState((currentNumber)=>{ return currentNumber + 1 }); **차이점 button onClick={() => { setNumber(number + 1); // 첫번째 줄 setNumber(number + 1); // 두번쨰 줄 setNumber(number + 1); // 세번째 줄 }} />// 코드가 3개를 써놔도 1번만 실행되어서 1만 증가 button .. 2024. 7. 3. [Next.js] Prisma 개념 및 사용법 프리즈마는 대중적인 타입스크립트 지원 ORM 중 하나입니다. 프리즈마 설치 전에 기본적인 DB 개발 환경은 갖춰두어야 합니다. 설치 명령은 아래와 같습니다.npm i prisma 사용법설치 후 프로젝트에 프리즈마 적용을 위해 아래 명령을 실행합니다. 그러면, 루트에 prisma 폴더와 함께 그 아래 schema.prisma 파일이 새로 생성됩니다. 덤으로 데이터베이스 스키마 정보 연동을 위한 환경변수 설정에 필요한 .env 파일도 알아서 생성해줍니다.npx prisma init✔ Your Prisma schema was created at prisma/schema.prismaYou can now open it in your favorite editor.warn You already have a .giti.. 2024. 6. 11. [React] scrollTo 스크롤 이벤트 오류 (찔끔찔끔 올라가는 버그) 홈페이지를 만들면서 클릭하면 최상단으로 올라가는 버튼을 만들었습니다. 123const scrollToTop = () => { window.scrollTo({ top: 0, behavior: "smooth" }); };Colored by Color Scriptercs 문제 상황엄청나게 간단한 코드인데 원인 모를 버그가 생깁니다.버튼을 누르면 찔끔(?) 올라갔다가 멈추는 현상이 발생합니다.왜 그런걸까 아무리 생각해봐도 답이 안나오는 상황에 구글링을 열심히 하여 해결방법을 찾았습니다. 12345678910const scrollToTop = () => { const scrollStep = -Math.floor(window.scrollY / 15); const scrollInterval = se.. 2024. 6. 11. 이전 1 2 3 4 5 6 7 ··· 12 다음
