잡다로그

서버 컴포넌트에서 API를 호출하게 되면, 초기 로딩 속도 향상, SEO 최적화, 네트워크 워터폴 방지, 보안 강화, 번들 크기 감소의 이점을 가져갈 수 있다. 언제 서버 컴포넌트에서 API를 호출해야 할까?페이지 초기 로드 시 필요한 데이터SEO가 중요한 콘텐츠사용자 상호작용 없이 표시되는 데이터인증이 필요한 데이터 호출언제 클라이언트 컴포넌트에서 API를 호출해야 할까?사용자 상호작용 후 필요한 데이터 (클릭, 검색 등)실시간으로 업데이트되는 데이터폼 제출 후 처리해야 하는 데이터사용자 세션에 의존하는 개인화된 데이터서버 컴포넌트에서 API를 호출하고, 클라이언트 컴포넌트에게 전달하기 위해서는 dehydration - hydration 과정이 필요하다. 컴포넌트기 이 과정에서 핵심적인 역할을 한다..

Mutations쿼리(useQuery)와 달리, Mutation은 데이터를 생성/업데이트/삭제하거나 서버 사이드 이펙트를 수행하는 데 사용된다.  * React에서 사이드 이펙트란, 함수 내에서 동일한 입력에 대해 같은 결과를 보장할 수 없도록 하는 것이다. 서버에서 API 호출, 쿠키 이용 등 함수 실행 과정에서 외부의 값을 변경(add, update, delete)하는 것이다. 이 사이드 이펙트를 처리하기 위한 hook이 useEffect이다. useMutationconst mutation = useMutation({ mutationFn: (newTodo) => { return axios.post('/todos', newTodo) }, })필수인자mutationFn: defaul..

본 포스팅은 공식 문서를 번역 및 외부 포스팅 참고 후 정리한 글입니다.📌useCallbackuseCallback은 리렌더링 간에 함수 정의를 캐싱해주는 훅이다. 이벤트 핸들러 함수가 자주 재생성되는 경우, 하위 컴포넌트에 props로 전달되는 함수가 자주 재생성되는 경우, 렌더링 최적화가 필요한 경우 등에 사용된다.useCallback은 성능 최적화를 위한 용도로만 사용해야 한다. 만약 코드가 useCallback없이 작동하지 않는다면, 먼저 근본적인 문제를 해결해야 한다.const cachedFn = useCallback(fn, dependencies)매개변수fn : 캐싱할 함숫값. 첫 렌더링에서 이 함수를 반환한다. 다음 렌더링에서 dependencies이 변경되었다면 이번 렌더링에서 전달한 함수..

Prop DrillingProps를 사용하면 UI 트리를 통해 명시적으로 데이터를 사용하는 컴포넌트에 전달할 수 있다.그러나 많은 컴포넌트에서 같은 prop이 필요한 경우 복잡해질 수 있다. 트리 상 높은 컴포넌트에 있는 데이터를 끌어올리다 보면 "Prop drilling" 을 초래할 수 있다. 이를 대체하기 위해서는,1.주요 컴포넌트들에 props가 여러 번 거쳐가는 것은 그리 이상한 일이 아님을 잊지 않는다.2. 컴포넌트를 추출(분리)한다.3. Context를 사용한다. Context는 컴포넌트가 트리 상 아래에 위치한 모든 곳에 데이터를 제공하도록 한다.컴포넌트의 최상위 수준에서 호출하여 context를 읽고 구독하여 사용할 수 있다. 테마 지정(ex.다크모드), 현재 사용자/계정 정보, 라우팅, ..