useCallback (2) 썸네일형 리스트형 [트러블 슈팅] 방콕 스타일 (새로고침 시 좋아요 랜덤 활성화 이슈) 팀 프로젝트 방콕스타일을 진행하면서 발생한 트러블 슈팅입니다.발생한 오류 🔥방콕 스타일 뉴스피드 프로젝트에서 게시물 목록을 렌더링 하던 중 페이지를 새로고침했을 때, `좋아요`가 랜덤으로 활성화된 상태로 표시되는 오류가 발생했습니다. 좋아요가 랜덤으로 표시되는 건 아주 큰 문제였기 때문에 해결이 시급했습니다. 해결 과정 🔎useOnAuthStateChange supabase에서 auth 관련 event가 발생할 때마다 알림을 받는 메서드입니다. 그래서 session이 있으면 컨텍스트에 `session.user`정보를 보내서 컨텍스트에서 유저 정보를 저장하게 됩니다.// 유저정보를 context에 저장하는 함수const useOnAuthStateChange = () => { const { signI.. React 숙련 3 (Memoization) Memoization 📖리렌더링 발생 조건컴포넌트에서 state가 바뀌었을 때컴포넌트가 내려받은 props가 변경되었을 때부모 컴포넌트가 리렌더링 된 경우 자식 컴포넌트 모두최적화리액트에서 리렌더링이 자주 발생한다면 비용적인 측면에서 좋지 않기 때문에 최적화 작업이 필요합니다. 그래서 대표적인 방법으로 아래 3가지 방법이 있습니다. `React.memo` : 컴포넌트를 캐싱`useMemo` : 값을 캐싱`useCallback` : 함수를 캐싱 React.memo📖 1번 컴포넌트가 리렌더링 될 때 2~7번이 모두 리렌더링 됩니다.4번 컴포넌트가 리렌더링 될 때 6~7번이 모두 리렌더링 됩니다. 이 처럼 자식 컴포넌트에서 바뀐 게 없는데 리렌더링 되는 문제를 `React.memo`로 해결할 수 있습니다... 이전 1 다음
