상태관리의 근본, Context API

Vue로 처음 프론트를 접한 나는 리액트도 당연히 양방향으로 데이터 이동이 가능한 줄 알았다

리액트를 배웠을 때 props 전달에서 데이터를 내리고 올리다가 길을 잃었다..

 

완전 냄새나는 코드를 작성하다가 Context를 알게되었다

그리고 많은 라이브러리에서 Context 개념을 사용하고 있었다

---

Context란

props 없이 React에서 컴포넌트 간에 데이터를 전달하기 위한 개념으로,

리액트에서 유일하게 컴포넌트를 건너뛰면서 데이터를 전달하는 방법이다.

 

언제 사용하나?

리액트는 단방향 데이터로, 데이터를 전달하기 위해서는 부모 컴포넌트에서 자식 컴포넌트로 props 전달한다.

하지만 앞서 예시처럼 중간에 여러 컴포넌트들을 거쳐야 하거나

다크모드, 전체 언어, 특정 state처럼 여러 컴포넌트들이 같은 정보를 요청할 때 전달 과정 자체가 복잡해진다.

 

이때 등장한 구세주가 Context API

Context는 위치를 넘어 컴포넌트를 뛰어 넘을 수 있는 데이터 모음으로,

Context.Provider로 감싸진 컴포넌트의 자식 컴포넌트들은  Context에 접근 할 수 있다

 

부모 컴포넌트에 Context.Provider 우산을 씌우면, 트리 아래 컴포넌트들은 Context의 정보를 사용할 수 있다!

 

어떻게 사용하나?

1. context 객체를 만든다.
2. context.provider로 사용할 컴포넌트의 부모 컴포넌트를 감싸, 값을 공유할 범위를 지정한다.
3.value로 공유할 값을 전달한다.

import React from 'react';
import { useState, useContext, createContext } from 'react';
export const UserContext = createContext(); //context 생성

export default function App() {
  const [data, setData] = useState(100);
  const handleClick = () => setData((prev)=> prev+1);
  return (
    <UserContext.Provider value={{data, txt:"문자열", onClick : handleClick}}>
      <User />
    </UserContext.Provider>
  )
}
function User() {
  const {data, txt, onClick} = useContext(UserContext); // context 가져오기
  return (
      <>
        <h1>{data}</h1>
        <p>{txt}</p>

        <button onClick={onClick}>BTN</button>
      </>
      
  )
}

 

1. export const UserContext = createContext();

context를 생성한다

 

컴포넌트는 다른 파일에 있기 때문에 export 로 내보낸다

참고로 리액트에서 components 폴더처럼 context폴더를 따로 만들어서 관리하는 것이 좋다

 

2. <UserContext.Provider>

App 컴포넌트에서는 UserContext.Provider를 사용하고 있다

 

Provider로 감싸진 컴포넌트들은 value로 전달된 값에 접근 가능하다

즉, "감싼 컴포넌트 안에서 Context를 요청하면 Context를 제공해라" 라는 의미다

그러면 가장 가까운 Provider의 Context를 사용한다

 

3. <UserContext.Provider value={{data, txt:"문자열", onClick}}>

여기서 value는 트리 전체에 공유할 데이터를 value prop으로 객체에 담아 전달한다

예제에서는 state, 문자열, 함수를 담아 전달했다

 

그렇다고 모든 데이터를 하나의 context에 전달하는 것이 아닌 사용에 따라 적절한 데이터를 넣은 context를 전달해야한다

 

4. import { useContext } from 'react'

    const {data, txt, onClick} = useContext(UserContext)

이제 Context를 사용할 컴포넌트에서 작성한다

먼저 useContext hook을 import 후, 사용할 Context를 명시해야한다

 

여기서 구조분해할당으로 바로 가져오면 더욱 편하겠죠?

 

쫌 더 개선해볼까?

위 예제에서는 App 컴포넌트에서 매번 context와 Provider를 생성하고 데이터를 넣어야했다

Context에 어떤 데이터가 들어가고, 어떻게 변하는지는 솔직히 관심없다

자식 컴포넌트는 데이터를 사용하기만 하면되기때문에!

 

그렇다면 이를 분리해보자

import { useState, createContext } from "react";

export const UserContext = createContext();

export function UserContextProvider({ children }) {
  const [data, setData] = useState(100);
  const handleClick = () => setData((prev) => prev + 1);
  return (
    <UserContext.Provider value={{ data, txt: "문자열", onClick: handleClick }}>
      {children}
    </UserContext.Provider>
  );
}

앞서 context와 provider를 생성하고, 처리하는 과정을 따로 분리했다

 

그럼 변한 결과는???

import React from 'react';
import {useContext} from 'react';
import {UserContext, UserContextProvider} from './Context';

export default function App() {
  return (
    <UserContextProvider>
      <User />
    </UserContextProvider>
  )
}
function User() {
  const {data, txt, onClick} = useContext(UserContext); // context 가져오기
  return (
      <>
        <h1>{data}</h1>
        <p>{txt}</p>

        <button onClick={onClick}>BTN</button>
      </>
      
  )
}

이제 UserContextProvider안에 들어오는 컴포넌트들은 모두 children으로 들어가고

UserContext.Provider로 감싸진 컴포넌트들이 반환된다

 

Context 사용 시 주의 사항

1. context의 재정의

Context lets you write components that “adapt to their surroundings” and display themselves differently depending on where (or, in other words, in which context) they are being rendered.

 Context를 사용하면 "주변 환경에 적응"하고 렌더링되는 위치 (즉, 어떤 컨텍스트)에 따라 다르게 표시되는 컴포넌트를 작성할 수 있습니다.

 

createContext로 생성된 context는 완전히 서로 분리된 다른 컴포넌트이다

컴포넌트는 자신의 위에 있는 UI 트리에서 가장 가까운 Context.Provider의 값을 사용한다

 

그래서 만약 여러개의 context를 만들었다면, children을 다른 값으로 context provider로 감싸면 된다.

 

2. 트리 전체의 재렌더링

무턱대고 Context를 props의 대체제로 남발하면 안된다

context provider에 객체를 내려주고 있고, 객체의 프로퍼티가 업데이트된다면 무슨 일이 일어날까?

 

Context가 갱신되면 우산을 쓰고있는 모든 자식 컴포넌트들은 re-rendering이 되기때문에

그러니 빈번하게 상태가 업데이트 되는 경우는 사용하면 안된다

 

Context를 사용하기 전에 고려해보기

1. 전역적으로 사용하거나 props로 전달 시작

어떤 컴포넌트가 어떤 데이터를 사용하는지 매우 명확해진다

 

2. 컴포넌트를 추출하고 JSX를 children으로 전달

<Layout posts={posts} />
🔽
<Layout> <Posts posts={posts} /> </Layout>

- 데이터를 지정하는 컴포넌트와 데이터를 필요로 하는 컴포넌트 사이 레이어 수가 줄어듬

- props를 직접 사용하지 않는 시각적 컴포넌트를 children으로 만들자