데이터 요청 상태에 따라 다르게 노출되는 UX/UI 설계는 많은 고민을 필요로 한다. 이러한 문제를 해결하기 위해 React는 다양한 방법을 제공하는데, 그 중 Suspense와 ErrorBoundary를 활용한 선언적 데이터 패칭이 있다.

지금부터 Suspense와 ErrorBoundary를 활용한 선언적 데이터 패칭이 어떻게 효과적인지 함께 알아보자.

SWR, React-query 같은 data fetching 라이브러리들은 기본적으로 fetch한 데이터에 대한 캐싱 기능을 제공한다.

이 포스팅에서는 서버에서 받아온 데이터에 대한 캐싱 과정을 라이브러리 없이 직접 구현해보면서 이해해본다.

useCallback과 useMemo는 리액트의 최적화를 지원하는 Hook들이다. 두 Hook 모두 '최적화'라는 키워드가 있어 사용하지 않으면 손해라고 생각할 수 있다. (필자 역시 처음엔 그렇게 생각했었다...)

사실, 이 훅들은 주로 성능 개선을 목적으로 사용되지만, 항상 성능이 향상되는 것은 아닐 수 있다.

원티드 프리온보딩 사전과제를 진행하며 여러 리다이렉트 작업이 필요했다.

Root 컴포넌트 / 경로 접근 시 SignIn 페이지로 리다이렉트를 하고 있었으며 라우팅 시 SignIn과 Todo 페이지는 로그인 여부에 따라 리다이렉트 처리하는 고차 컴포넌트 AuthenticationGuard가 감싸고 있었다.

useNavigate로 라우팅할 때 리다이렉트 로직으로 인해 뒤로가기가 제대로 되지 않는 문제가 발견되었고, 이를 해결하기 위해 useNavigate를 좀 더 꼼꼼하게 살펴보게 되었다.

useCallback은 함수를 메모이제이션(memoization) 하기 위해서 사용되는 Hook 들이다. React의 useCallback을 useEffect와 함께 사용하여 여러방면으로 효율적인 코드를 구성할 수 있는 방법이 있다. useCallback은 useEffect와 생긴 것은 똑같지만, 역할은 조금 다르다.

React에서 map으로 컴포넌트를 반복 렌더 할 경우 콘솔에서 'Warning: Each child in a list should have a unique "key" prop'이라는 주의 문구를 확인할 수 있는데, 여기서 key는 무엇이며 왜 필요한지에 대해 알아본다.

Warning: Each child in a list should have a unique "key" prop

이 포스팅은 해외 저자의 글을 요약 및 번역하고 살을 붙여 옮긴다. 필자가 자바스크립트를 처음 접하고 배열을 막 다루기 시작할 때에 큰 도움이 되었다. 원문은 하단 링크로 남긴다.

이제부터 자바스크립트 배열 반복을 효과적으로 만드는 11가지 메서드에 대해 알아보자!

원문 저자의 서문:
Javascript의 일상적인 프로그래밍에서는 배열 요소에 대해 일종의 작업을 수행해야 합니다. 배열의 각 항목을 처리하는 것은 매우 일반적입니다. 따라서 각 배열 요소의 처리를 더 쉽고 효율적으로 만들기 위해 Javascript는 Iteration 메서드의 힘을 사용합니다.