React 기초 10 · useContext

useContext - 깊은 곳에 바로 전달

테마/로그인 같은 값을 중간 컴포넌트를 다 거치지 않고 깊은 곳에 바로 전달. props 줄줄이 넘기기(prop drilling) 해결사.

먼저 비유로

건물 전체에 흐르는 방송이에요

props는 사람에게 직접 손으로 쪽지를 건네는 거예요. 그런데 맨 위층 값을 맨 아래층에 전하려면 중간 사람들을 다 거쳐야 해요(이걸 prop drilling, 줄줄이 넘기기라고 해요). Context는 건물 전체에 트는 방송이에요. 위에서 한 번 방송하면, 중간을 거치지 않고 필요한 층이 바로 들어요.

테마(다크모드), 로그인한 사용자, 언어 설정처럼 여기저기서 두루 쓰는 값을 넘길 때 특히 좋아요. 모든 컴포넌트에 props로 일일이 안 꽂아도 되니까요.

직접 해보기

중간을 건너뛰고 맨 안쪽에 전달

맨 위에서 색을 바꿔보세요. 중간 Layout / Card는 theme을 전혀 모르는데도, 맨 안쪽 버튼 색이 곧바로 바뀌어요.

직접 만져보세요

맨 위에서 theme 바꾸기

Layout (theme 모름)

Card (theme 모름)

위에서 색을 바꾸면, 중간 Layout/Card는 theme을 한 번도 안 만졌는데도 맨 안쪽 버튼이 바로 바뀌어요. props로 줄줄이 넘겼다면 두 레이어를 다 거쳐야 했을 거예요.

중간 레이어는 'theme 모름'이라고 표시돼 있는데도 안쪽이 바뀌어요.

핵심은 이거예요

Context는 여기저기서 쓰는 값을 중간 컴포넌트를 거치지 않고 깊은 곳에 바로 전달해요. createContext로 통로를 만들고, Provider로 감싸고, useContext로 꺼내요.

흐름으로 보기

값이 흐르는 순서

1createContext로 값이 흐를 통로를 하나 만들어요.
2공유할 범위를 <Context.Provider value={값}>로 감싸요.
3그 안쪽 어디서든 useContext(통로)로 값을 바로 꺼내요. 중간을 안 거쳐요.
4Provider의 value가 바뀌면, 그 값을 쓰는 컴포넌트들이 다시 그려져요.

코드로 보기

딱 이만큼이에요

// 1) 값이 흐를 통로를 만든다const ThemeContext = createContext("indigo"); function App() {  const [theme, setTheme] = useState("indigo");  // 2) Provider로 감싸 값을 흘려보낸다  return (    <ThemeContext.Provider value={theme}>      <Layout />   {/* 중간 컴포넌트엔 theme을 안 넘긴다 */}    </ThemeContext.Provider>  );} function DeepButton() {  // 3) 깊은 곳에서 중간을 건너뛰고 바로 꺼낸다  const theme = useContext(ThemeContext);  return <button className={theme}>버튼</button>;}

createContext → Provider로 감싸기 → useContext로 꺼내기.

조심하세요

처음에 꼭 헷갈리는 것

모든 걸 Context에 넣기. 한두 단계만 넘기면 되는 값은 그냥 props가 더 명확해요. Context는 두루 쓰는 값에만.
Provider로 안 감싸기. Provider 밖에서 useContext를 쓰면 createContext의 기본값만 나와요. 쓰는 범위를 Provider로 감쌌는지 확인하세요.
value를 매 렌더 새 객체로 주기. value={{ a, b }}는 매번 새 객체라 소비자가 불필요하게 다시 그려질 수 있어요. 필요하면 useMemo로 감싸요.