728x90 전체 글66 Nextjs Link와 useRouter의 차이 Link / useRouter 사용법 // Link import Link from "next/link"; export const compo1 = () => { return ( some element ) } // useRouter import { useRouter } from "next/router"; export const compo2 = () => { const router = useRouter() const routeHandler = () => { router.push(url) } return ( some element ) } Nextjs에서 페이지를 전환하기 위해 사용하는 방법으로, Link를 이용하거나 useRouter를 이용해 router.push()와 같이 사용하여 전환해줄 수 있는데, 비슷해.. 2023. 3. 18. jest를 통한 테스트코드 사용 jest란? 단순성에 중점을 둔 javascript 테스트 프레임워크이며, babel, Typescript, node, React, Angular, Vue 등을 사용하는 프로젝트에서 작동한다. 본 포스팅은 React 환경을 기준으로 작성되었다. 1. jest 설치 npm install --save-dev jest @babel/preset-env # or yarn add --dev jest @babel/preset-env node.js 환경에서 import 등의 ES6 문법을 사용하기 위해 @babel/preset-env도 함께 설치해준다. 2. 루트 경로에 babel.config.js 파일 생성 module.exports = { presets: [ "@babel/preset-env", // typescr.. 2023. 3. 18. Dynamic import를 사용해 동적으로 모듈 가져오기 Dynamic import란? import() 표현식으로 사용하며, 표현식은 모듈을 읽고 해당 모듈이 내보내는 것들을 모두 포함하는 객체를 담은 이행된 Promise를 반환한다. 호출은 어디서나 가능하다. Dynamic import를 사용하는 이유 1. 기존 import문은 정적인 방식으로, 정적으로 가져오는 경우 코드 로드 속도가 느려지고, 가져오는 코드가 필요할 가능성이 적거나 없을 가능성이 있다. 2. 정적으로 가져올 때 프로그램의 메모리 사용량이 크게 증가하고 가져오는 코드가 필요할 가능성이 낮다. 3. import문에 동적 매개변수를 사용할 수 없다. ※ 즉, 동적으로 import하는 것은 성능 향상과 필요한 경우에 맞춰 사용하는 것에 용이하다. 사용법 필요한 함수들을 정의하고, 필요한 곳에서 .. 2023. 3. 18. React useCallback을 이용해 함수 재사용하기 useCallback이란? 특정 함수를 새로 만들지 않고 재사용하고 싶을때 사용하는 함수 메모이제이션용 React hook이다. const memoFn = useCallback(()=>{},[dep]) 첫번째 인자의 함수를 두번째 인자의 종속성 배열 내의 값이 변경될 때까지 저장하여 재사용할 수 있도록 해준다. javascript에서 함수(function () {} or () => {})는 객체 리터럴( {...} )이 항상 새 객체를 생성하는 것과 유사하게 항상 다른 함수를 생성한다. 그렇다면 함수를 props 로 내려준다고 하면 하위 컴포넌트는 props가 변경되었다고 인식하게 된다. 그렇다면 React.memo를 이용한 최적화가 원하는대로 작동하지 않을 수 있기 때문에 이러한 점을 useCallba.. 2023. 3. 16. React useMemo 사용하기 useMemo란? useMemo는 React.memo()와 useCallback과 같이 컴포넌트를 최적화하기 위한 훅 중 하나다. useMemo를 사용하는 이유 React의 컴포넌트는 부모 컴포넌트가 렌더링되거나, 자신의 state 변경, 상위 컴포넌트에서 내려받는 props가 변경될 때마다 다시 렌더링된다. 그런데 내려받는 props나 state가 여러가지일때 한 개 props의 변경으로 모든 값이 다시 계산되는 경우 불필요한 비용이 누적되게 된다. useMemo는 이런 현상을 효율적으로 전환하기 위한 hook이다. useMemo를 적용하기 전 // 상위 컴포넌트 import { useState } from "react"; import { UseMemoChildren } from "./UseMemoCh.. 2023. 3. 16. 이전 1 2 3 4 5 6 7 ··· 14 다음 728x90
