The Ultimate React Course 2024: React, Redux & More 의 필기 위주로 작성되었습니다. 해당 강의는 강의 내용 기반으로 블로그 글 작성이 허용된 강의입니다.

Context API?

위 사진처럼 만약 최상위 컴포넌트의 count prop을 B와 F컴포넌트에 전달하려면, Prop drilling 문제가 생긴다. 이를 해결하기 위해 리액트는 Context API를 사용해 상태를 어디서든 읽을 수 있는 방법을 마련해 뒀다.

Context API는 수동으로 prop을 트리 밑으로 내릴 필요 없이 데이터를 앱 전체에서 사용 가능하게 해주는 도구다. Global state를 "broadcast"해준다고 생각해보면 된다.

이 방식으로 Provider가 value값에 대한 access를 주면, consumer 컴포넌트들이 해당 context value를 읽고 사용하며, value 값이 바뀌면 consumer 컴포넌트들의 리렌더링이 트리거된다.

사용법

import { createContext, useContext } from "react";

// 1) Context 생성
const PostContext = createContext();

function usePosts() {
  const context = useContext(PostContext);
  if (context === undefined)
    throw new Error("PostContext was used outside of the PostProvider");
  return context;
}

// 2) 자식 컴포넌트에 값 제공
// App.tsx
<PostContext.Provider
      value={{
        posts: searchedPosts,
        onAddPost: handleAddPost,
        onClearPosts: handleClearPosts,
        searchQuery,
        setSearchQuery,
      }}
>
  
// 3) Context 값 소비 (Consume)
const { onClearPosts } = useContext(PostContext);
// or
const { onClearPosts } = usePosts();

Contet 생성, Provider로 자식 컴포넌트들 감싸기, consumer 컴포넌트에서 useContext 사용하여 값 접근 단계로 이루어진다.

상태의 종류

상태는 State accessibility에 따라 나누면 local state와 global state로 나뉘고, State domain에 따라 나누면 Remote state와 UI state로 나뉜다.

Remote state는 remote server, API같은 곳에서 로드된 데이터고, UI state는 전자를 제외한 모든 상태들이다. 이 둘의 관리 방법은 완전히 다르고, 위의 표를 참고해볼 수 있다.

상태를 어디에 저장할지 옵션은 매우 많다.