"개발자에게 버그란 항상 따라다니는 그림자와 같다. 모든 개발자들이 버그가 없는 제품을 만들기 위해 최선을 다하지만 늘 그렇듯 버그는 예기치 못한 곳에서 매번 발생한다."
모던 리액트 Deep dive 중
버그와 예기치 못한 작동을 방지하기 위한 여러 가지 방법이 있는데, 그중 가장 빠르게 시도해 볼 수 있는 방법은 정적 코드 분석이다. 자바스크립트 생태계에 가장 많이 사용되는 정적 코드 분석 도구 ESLint가 무엇인지 어떻게 사용하면 좋을지 살펴보자.
데이터 요청 상태에 따라 다르게 노출되는 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