React (18) 썸네일형 리스트형 [React] - 반응형 Resize 커스텀 훅 구현하기 반응형 웹 구현을 위해 화면 크기가 달라질 때마다 화면의 가로나 세로 길이를 구하고자 했다. 컴포넌트 내에서 window.innerWidth로 받아오면 처음 렌더링할 때의 가로 길이는 받아올 수 있었는데, 새로 고침을 하지 않고 화면 사이즈가 변경되었을 때는 동적으로 브라우저의 가로 길이를 받아올 수 없었다. 브라우저 화면 사이즈가 변경될 때마다 그 값을 리턴하고 리렌더링하는 리액트 커스텀 훅을 사용하여 특정 컴포넌트가 데스크탑 사이즈일 때만 보일 수 있도록 처리했다. import { useEffect, useState } from "react"; const useWindowSizeCustom = () => { // 초기 state 값은 undefined로 세팅한다. const [windowSize, s.. React-Query와 Next.js 를 활용하여 서버 사이드 렌더링하기 Next.js의 Data Prefetching Next.js는 서버 사이드에서 데이터 Prefetching이 가능하다. Prefetch 하게 될 데이터는 HTML 페이지가 클라이언트에게 전송되기 전에 준비되어 HTML에 포함되어 렌더링된다. 따라서 한 번 사이트가 로딩된 후에는 로딩 시간이 크게 단축된다는 점, SEO에 좋다는 아주 유명한 장점이 있다. React-Query + Next.js 도입 배경 React-Query는 Next.js의 서버 사이드에서 데이터를 Prefetch하여 queryClient로 넘겨주는 기능을 제공한다. 개인 프로젝트를 개발하면서 서버로부터 Fetch한 데이터를 더 효율적으로 다룰 방법에 대해 고민해보았다. 먼저 사용자가 우리 서비스에 최초로 진입한 후, 가장 빠른 시간 안.. [Redux] - 당신의 useSelector는 잘못되었다!! 개요 부끄럽지만 최근까지 나는 react-redux의 useSelector를 다음과 같이 구조 분해 할당하여 사용해왔다. const { id, name } = useSelector((state: RootState) => state.user) 이와 같이 스토어의 슬라이스를 전부 갖고 와서 그 중 필요한 값만 구조 분해 할당으로 빼왔다. 최근에 불필요한 리렌더링을 잡기 위해 데브툴을 켜놓고 만져보던 도중, 리렌더링이 전혀 발생하지 않아야 할 곳들이 반짝반짝하는걸 봤다. useSelector가 문제 될 줄은 전혀 모르고 삽질만 하다가, "혹시 ?" 하는 마음에 검색해봤다가 알게 되었다. useSelector + 구조 분해 할당 useSelector로 state.user 까지만 가져온 후 구조 분해 할당으로 값.. [React] - Outlet을 이용한 중첩 라우팅 react-router-dom v6부터 outlet을 이용한 중첩 라우팅을 통해 레이아웃을 쉽게 구현할 수 있다 이는 페이지마다 다른 레이아웃을 보여주기에도 굉장히 편리하게 적용할 수 있다. Layout.js 이전에는 children을 활용해서 라우트에 레이아웃을 연결해주는 방식으로 구현을 했는데 이제 Outlet이 children 역할을 해준다고 이해하면 된다. App.js Home과 View는 Layout이 적용되어 있지만 아래 Layout Route로 감싸지 않은 Test 페이지는 레이아웃이 적요되어 있지 않는다 그리고 여담으로 Not Fount 페이지를 구현할 때는 위와 같이 와일드 카드(*) 를 활용한다 와일드카드는 모든 텍스트를 매칭하는데 이때 상단에 위치하는 라우트들의 규칙을 모두 확인하고 .. [React] - useEffect 훅 실전 활용법(2) *의존성 배열을 없애는 방법 - 왠만하면 리액트에서 의존성 배열을 사용하지 않는게 좋다 왜냐하면 의존성 배열을 관리하는게 생각보다 많은 시간과 노력이 들어가기 때문이다 특히 속성값으로 전달되는 함수를 의존성 배열에 넣는 순간 그 함수는 useCallback 등을 사용해서 자주 변경되지 않도록 신경써서 관리해야 한다 - 위 코드는 의존성 배열을 사용하지 않고 if문으로 fetchAndSetUser 호출 시점을 관리한다 이렇게 의존성 배열을 입력하지 않으면 부수 효과 함수에서 사용된 모든 변수는 가장 최신화된 값을 참조하므로 안심할 수 있다 - 이렇게 작성하면 밑에 코드처럼 fetchSetUser 함수에 useCallback 훅을 사용하지 않아도 된다. * useState의 상탯값 변경 함수에 함수 입력하기.. [React] - useEffect 실전 활용법 (1) 의존성 배열 - 의존성 배열은 useEffect 훅에 입력하는 두번째 매개변수이다 의존성 배열의 내용이 변경됐을 때 부수 효과 함수가 실행된다. 부수 효과 함수에서 API를 호출하는 경우 - 부수 효과 함수에서 API를 호출한다면 불필요한 API호출이 발생하지 않도록 주의해야 한다. - 위 예제에서 fetchUser함수는 렌더링을 할 때마다 호출되므로 비효율 적이다. - 이 문제를 해결하기 위해 의존성 배열에 빈 배열을 넣을 수도 있다 하지만 이는 userId가 변경돼도 새로운 사용자 정보를 가져오지 못하기 때문에 올바른 해결책이 아니다. - 이렇게 의존성 배열을 이용해서 위 문제를 해결할 수 있다 이제 userId가 변경될 때만 fetchUser 함수를 호출한다. - 위 예제는 상탯값 needDetai.. [React] - useReducer * useReducer - useReducer 훅을 사용하면 컴포넌트의 상탯값을 리덕스의 리듀서처럼 관리할 수 있다. - 위 예제에서 reducer는 리덕스와 같은 방식으로 작성하였다. - useReducer 훅의 매개변수로 앞에서 작성한 리듀서와 초기 상탯값을 입력한다 useReducer 훅은 상탯값과 dispatch 함수를 차례대로 반환다. - 여기서 dispatch는 리덕스의 dispatch와 같은 방법으로 사용한다. - 보통 상위 컴포넌트에서 다수의 상탯값을 관리한다 이때 자식 컴포넌트로부터 발생한 이벤트에서 상위 컴포넌트의 상탯값을 변경해야 하는 경우가 많다 이를 위해 상위 컴포넌트에서 트리와 깊은 곳 까지 이벤트 처리 함수를 전달한다 이러한 작업은 상당히 손이 많이 가고 코드의 가독성도 떨어진.. [React] - useMemo, useCallback 메모이제이션 훅(useMemo, useCallback) - useMemo와 useCallback은 이전 값을 기억해서 성능을 최적화하는 용도로 사용된다. useMemo useMemo 훅은 계산량이 많은 함수의 반환값을 재활용하는 용도로 사용한다. - useMemo 훅의 첫번째 매개변수로 함수를 입력한다, - useMemo 훅은 이 함수가 반환한 값을 기억한다 useMemo 훅의 두번째 매개변수는 의존성 배열이다. - 의존성 배열이 변경되지 않으면 이전에 반환된 값을 재사용한다 만약 배열의 값이 변경됐으면 첫번째 매개변수로 입력된 함수를 실행하고 그 반환값을 기억한다. useCallback - useMemo 훅은 lodash 같은 라이브러리에서 제공해주는 메모이제이션과 비슷하다 반면에 useCallback.. 이전 1 2 3 다음
