[React Docs Beta] 1-1. createContext

React Docs (beta) 번역 및 정리

1. Built-in React APIs

1-1. createContext

📍createContext

컴포넌트가 읽거나 제공할 수 있는 context를 생성한다

const SomeContext = createContext(defaultValue)

📍createContext(defaultValue)

컴포넌트 외부에서 호출하여 context를 생성한다

import { createContext } from 'react';

const ThemeContext = createContext('light');

✅매개변수

defaultValue

- 일치하는 context provider가 없을 때 context가 가질 값

- 의미있는 기본값이 없으면 null을 명시하면 된다

✅반환값

context 객체를 반환

- context 객체 자체는 어떤 정보도 갖고 있지 않음

- 다른 컴포넌트가 consume하거나 provide할 context를 나타냄

- 일반적으로 컴포넌트에서 SomeContext.Provider를 사용해 context value를 지정한다

- 그리고 useContext(SomeContext) 형태로 호출하여 값을 읽는다

context 객체는 아래 2가지 프로퍼티를 갖는다

- SomeContext.Provider : 하위 컴포넌트에 value를 공급(provide)

- SomeContext.Consumer : 거의 useContext로 대체됨 (value 읽는 방식)

📍SomeContext.Provider

컴포넌트를 context provider로 래핑하여 하위 모든 컴포넌트에 context value를 지정

function App() {
  const [theme, setTheme] = useState('light');
  // ...
  return (
    <ThemeContext.Provider value={theme}>
      <Page />
    </ThemeContext.Provider>
  );
}

✅props

value

- 해당 context를 읽는 모든 컴포넌트에 전달할 값

- 모든 데이터 타입 가능

📍SomeContext.Consumer

대신 useContext를 사용할 것!

function Button() {
  // ✅ Recommended way
  const theme = useContext(ThemeContext);
  return <button className={theme} />;
}

📍예제 1. context 생성

- 컴포넌트 바깥에서 createContext 호출

- 여러번 호출 가능

import { createContext } from 'react';

const ThemeContext = createContext('light');
const AuthContext = createContext(null);

createContext는 context 객체를 반환하며, 컴포넌트에서 useContext에 context 객체를 전달하여 데이터를 읽는다

function Button() {
  const theme = useContext(ThemeContext);
  // ...
}

function Profile() {
  const currentUser = useContext(AuthContext);
  // ...
}

위의 코드에서 theme는 ThemeContext의 defaultValues가 된다.

- defaultValues는 절대 바뀌지 않기 때문에, 사용하지 않는다면 null을 명시하면 된다

context는 모든 유형의 동적인 값을 공급할 수 있다

function App() {
  const [theme, setTheme] = useState('dark');
  const [currentUser, setCurrentUser] = useState({ name: 'Taylor' });

  // ...

  return (
    <ThemeContext.Provider value={theme}>
      <AuthContext.Provider value={currentUser}>
        <Page />
      </AuthContext.Provider>
    </ThemeContext.Provider>
  );
}

이제 Page 컴포넌트와 하위 모든 컴포넌트 들은 context values를 useContext 를 호출하여 읽을 수 있다

⭐만약 전달된 context values가 변경되면, context를 읽는 모든 컴포넌트들은 리렌더링된다

📍createContext

📍createContext(defaultValue)

📍SomeContext.Provider

📍SomeContext.Consumer

📍예제 1. context 생성

티스토리툴바