리액트에 대해 미리 알았다면 좋았을 7가지 깨달음

유튜브에서 freecodecamp.org 채널을 보다가 엮어서 본 영상입니다. (왜 유튜브에서만 보게 한 건지는 모르겠네요)

내용은 다음과 같습니다.

• 불변성: React 상태는 직접 변경할 수 없으며, 항상 이전 데이터를 새 데이터로 교체해야 합니다.

• useState의 적절한 사용: 모든 것을 useState에 넣을 필요는 없으며, 서버, URL, 로컬 스토리지 등 다양한 상태는 전용 라이브러리를 사용하는 것이 좋습니다.

• 파생 값: 다른 상태나 props 데이터에서 파생된 값은 useEffect 없이 컴포넌트 내에서 직접 계산할 수 있습니다.

• 계산 가능한 값: 네트워크 요청과 같은 부수 효과가 필요 없는 계산은 useEffect 없이 직접 수행하며, 비용이 많이 드는 계산은 useMemo로 감쌀 수 있습니다.

• 고유한 키: map 함수에서 얻는 인덱스는 고유하지 않으므로 React 목록 항목의 키로 사용해서는 안 되며, 고유 ID를 생성하여 사용하는 것이 좋습니다.

• 종속성: useEffect, useMemo, useCallback과 같은 훅의 종속성 배열에 필요한 값을 항상 포함해야 합니다.

• useEffect 피하기: useEffect는 사용하기 어려우므로, 데이터 페칭에는 TanStack Query 또는 SWR과 같은 라이브러리를 사용하고, 값을 파생하거나 이벤트 핸들러로 응답하는 방식으로 useEffect 사용을 줄이는 것이 좋습니다.

동일 채널에 있는 리액트에 대해 12분만에 정리하는 영상도 굉장히 훌륭합니다.

엄청난 고퀄리티의 영상을 제공하고도 막상 마지막에 홍보하는 부트캠프 사이트 링크는 죽어 있습니다.. (비즈니스는 참 어려운 것 같습니다. )