개발일기

useNavigate는 useHistory를 대체하여 react router dom v6에서 도입되었다. useHistory와 동일하게 url을 변경하여 페이지를 이동시키는데 사용된다.useNavigate 기본 사용법import { useNavigate } from 'react-router-dom' // 6버전 이상에서만 사용 가능const navigate = useNavigate()navigate('/test') // /test url로 이동기본적인 사용법은 위와 같이 useNavigate를 import한 후, navigate()에 이동할 url를 추가하여 사용한다. 예를 들어 버튼 onClick 함수에 navigate()를 정의하면 버튼을 클릭했을 때, 입력한 url로 이동하게 된다. 위의 방법 외에..

useCallback은 useMemo와 비슷하게 memoization하는 hook이지만 함수를 memoization한다는 점에서 useMemo와 차별점을 가지고 있다. React에서는 컴포넌트 안에 함수가 선언되어 있으면 컴포넌트가 리렌더링 될 때 함수들을 재생성하게 된다. 하지만 useCallback으로 감싸 memoization된 함수는 의존성 배열에 들어있는 변수 또는 함수가 변경되지 않은 이상 재생성되지 않는다. 즉 useMemo와 비슷한 개념으로 useCallbak은 기존 함수를 재사용할 수 있게 하는 hook이다. useCallback의 형태import { useCallback } from 'react' // useCallack 사용을 위해 useCallback import// useCallb..

react에는 변수, 함수의 성능을 최적화하는 hook인 useMemo와 useCallback이 존재한다. useMemo는 그 중에서 변수를 최적화 할 때 사용한다. useMemo는 변수의 값을 memoization한다. 여기서 memoization 이란 값을 캐싱하여 나중에 재활용하는 것을 의미한다. useMemo는 변수의 값을 memoization 하여 의존 변수가 변경되지 않으면 캐싱된 변수 값을 계속 사용한다. 만약 의존 변수가 변경되면 캐싱된 데이터를 삭제하고 새로 변수 값을 계산하여 대입한다. useMemo의 형태import { useMemo } from 'react' // useMemo 사용을 위해 useMemo import// useMemo로 함수를 감싸기const memoizedValue..

Webpack4까지는 Buffer는 전역으로 지원했으나 Webpack5부터는 이 Polyfill을 지원하지 않는다. Buffer가 필요한 부분마다 import하거나 Webpack 설정 파일에 Buffer 플러그인을 추가해줘야 한다. 1. Buffer 패키지 설치yarn add buffernpm install buffer# import Bufferfrom 'buffer'패키지 매니저를 통해 buffer를 설치한 후 Buffer를 import하면 각 파일마다 사용이 가능하다. 2. Webpack 설정plugins: [ ... new webpack.ProvidePlugin({ Buffer: ['buffer', 'Buffer'], }) ...]Webpack 설정파일에 위의 코드..

리액트에서 redux또는 useState를 통해 참조하는 값이 변경되면 해당 값을 참조하는 컴포넌트를 리랜더링시킨다. 하지만 참조값이 변경되더라도 리랜더링이 필요하지 않을 경우 useRef를 사용하여 적절한 대안으로 삼을 수 있다. useRef를 사용하면 참조하는 값이 변경되더라도 컴포넌트의 리랜더링이 발생하지 않는다. redux나 useState를 통해 다른 참조하는 값이 변경되어 컴포넌트가 리랜더링되더라도 useRef가 참조하고 있는 값은 변경되지 않고 유지된다. 또는 DOM에 직접 접근하여 ref를 통해 해당 태그의 className값을 가져오거나 style을 변경하는 등의 작업을 할 수 있다. 이러한 특징을 가진 useRef는 useState나 redux에 비해 사용빈도는 높지 않지만 DOM에 직..

리액트에서 상태관리를 사용할 때, 주로 리덕스를 사용한다. 이 리덕스를 사용할 때, 새로고침 버튼을 누르게 되면 저장되어있던 상태가 모두 초기화 되는 것을 확인할 수 있다. 새로고침으로 인해 데이터가 모두 증발하게 되면 페이지가 제대로 렌더링이 되지 않거나 데이터를 가져오지 못해 에러가 발생할 수 있다. 이를 미연에 방지하고자 Redux persist를 활용하여 에러를 방지할 수 있다. 즉, Redux persist는 리덕스에 저장된 데이터를 로컬 스토리지 또는 세션 스토리지에 저장하여 데이터를 유지시켜주는 패키지이다. 1. 설치 npm install redux-persist -D yarn add redux-persist -D 2. index.js import React from 'react'; impo..

Redux의 버전이 4.2로 올라가면서 변경사항이 하나 생겼다. 액션 스토어를 생성하기 위해 사용하던 createStore가 deprecated가 되었다. 비록 계속해서 사용할 수는 있지만 redux toolkit의 configureStore로 대체하는 것을 권장하고 있다. createStore는 리듀서와 미들웨어를 추가할 때, 설치해야 하는 요소가 많다는 복잡함을 가지고 있다. 하지만 이를 간단하고 단순하게 만든 @reduxjs/toolkit의 configureStore를 사용하면오류의 확률을 줄이고 편하게 사용할 수 있다. 1. 설치 npm install @reduxjs/toolkit -D yarn add @reduxjs/toolkit -D 2. import 방법 import { configureSt..

1. useParams란? useParams는 리액트에서 제공하는 Hook으로 동적으로 라우팅을 생성하기 위해 사용한다. URL에 포함되어있는 Key, Value 형식의 객체를 반환해주는 역할을 한다. Route 부분에서 Key를 지정해주고, 해당하는 Key에 적합한 Value를 넣어 URL을 변경시키면, useParams를 통해 Key, Value 객체를 반환받아 확인할 수 있다. 반환받은 Value를 통해 게시글을 불러오거나, 검색목록을 변경시키는 등 다양한 기능으로 확장시켜 사용할 수 있다. 2. 관련 라이브러리 설치 2-1. package.json 생성 npm init -y yarn init -y # package.json 생성 2-2. react 관련 패키지 설치 npm install react..