ReactJS - Context: A Beginner's Guide

안녕하세요, 미래의 개발자 여러분! 오늘 우리는 ReactJS의 Context의 fascinierende 세계로 뛰어들어 보겠습니다. 여러분의 친절한 이웃 컴퓨터 교사로서, 저는 이 개념을 첫 번째로 배울 때와 같은 열정으로 안내해 드리겠습니다. 여러분의 좋아하는 음료를 골라, 편안하게 앉아 이 흥미로운 여정을 함께 시작해 보세요!

React에서 Context는 무엇인가요?

가족 모임에서 웃음을 자아내는 재미있는 이야기를 모두에게 공유하고 싶을 때, 각 사람에게 귓속말로 전하는 대신 한 번에 알릴 수만 있다면 얼마나 좋을까요? React에서 Context가 하는 일이 바로 그입니다!

Context는 데이터를 컴포넌트 트리를 통해 자동으로 내려보내지 않고도 전달할 수 있게 해주는 방법을 제공합니다. 이는 React 컴포넌트 트리 전체에서 "전역"으로 간주될 수 있는 데이터를 공유하는 데 설계되었습니다.

Context를何时 사용해야 하나요?

자세히 탐구하기 전에 Context를 사용할 때를 이해해 보겠습니다:

1. 여러 레벨의 다양한 컴포넌트에서 접근이 필요한 데이터가 있을 때.
2. "prop drilling"을 피하고 싶을 때 ( 데이터가 필요하지 않은 중간 컴포넌트를 통해 props를 내려보내는 것).

Context 생성 및 사용

Context를 생성하고 사용하는 과정을 코드 예제와 함께 살펴보겠습니다.

Step 1: Context 생성

먼저 Context를 생성해야 합니다. 이를 위해 React.createContext() 메서드를 사용합니다.

import React from 'react';

const ThemeContext = React.createContext('light');

export default ThemeContext;

이 예제에서 우리는 기본값이 'light'인 ThemeContext를 생성했습니다. 이 기본값은 컴포넌트 트리 위에 매칭되는 Provider가 없는 경우 사용됩니다.

Step 2: Context 제공

이제 Context를 가지고 있으므로, 컴포넌트 트리에 제공해야 합니다. 이를 위해 Context.Provider 컴포넌트를 사용합니다.

import React from 'react';
import ThemeContext from './ThemeContext';

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

이 예제에서 우리는 Toolbar 컴포넌트(그리고 그 하위 모든 자식 컴포넌트)를 ThemeContext.Provider로 감싸고 있습니다. 우리는 값으로 "dark"을 설정하여 이 Provider 내 모든 컴포넌트에서 이 값에 접근할 수 있게 합니다.

Step 3: Context 소비

이제 Context를 사용하는 재미있는 부분이 왔습니다. Context를 소비하는 두 가지 방법이 있습니다:

1. Class.contextType
2. Context.Consumer

두 가지 방법을 살펴보겠습니다:

Class.contextType 사용

import React from 'react';
import ThemeContext from './ThemeContext';

class ThemedButton extends React.Component {
  static contextType = ThemeContext;
  render() {
    return <button theme={this.context}>저는 테마화된 버튼입니다!</button>;
  }
}

이 예제에서 ThemedButton은 클래스 컴포넌트입니다. 우리는 그의 contextType을 ThemeContext로 설정했습니다. 이제 this.context는 현재 컨텍스트 값을 제공합니다.

Context.Consumer 사용

import React from 'react';
import ThemeContext from './ThemeContext';

function ThemedButton() {
  return (
    <ThemeContext.Consumer>
      {value => <button theme={value}>저는 테마화된 버튼입니다!</button>}
    </ThemeContext.Consumer>
  );
}

여기서 우리는 Context.Consumer 컴포넌트를 사용하고 있습니다. 그것은 렌더 프로프를 사용하여 현재 컨텍스트 값을 함수에 전달합니다.

여러 Context

occasionally, 여러 Context를 사용해야 할 수 있습니다. React는 여러 Context Providers를 중첩할 수 있게 해줍니다:

import React from 'react';
import ThemeContext from './ThemeContext';
import UserContext from './UserContext';

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <UserContext.Provider value="John Doe">
        <Toolbar />
      </UserContext.Provider>
    </ThemeContext.Provider>
  );
}

이제 여러 Context를 소비하는 방법은 다음과 같습니다:

import React from 'react';
import ThemeContext from './ThemeContext';
import UserContext from './UserContext';

function ThemedButton() {
  return (
    <ThemeContext.Consumer>
      {theme => (
        <UserContext.Consumer>
          {user => (
            <button theme={theme}>
              {user}는 {theme} 테마를 사용하고 있습니다
            </button>
          )}
        </UserContext.Consumer>
      )}
    </ThemeContext.Consumer>
  );
}

Context 업데이트

Context는 동적으로 변경될 수도 있습니다. 업데이트 예제를 살펴보겠습니다:

import React, { useState } from 'react';
import ThemeContext from './ThemeContext';

function App() {
  const [theme, setTheme] = useState('light');

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      <Toolbar />
      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
        테마 전환
      </button>
    </ThemeContext.Provider>
  );
}

이 예제에서 우리는 useState 훅을 사용하여 테마 상태를 관리하고 있습니다. 우리는 현재 테마와 setTheme 함수를 컨텍스트 값으로 전달하고 있습니다.

Context 메서드

다음은 주요 Context 메서드를 요약한 표입니다:

메서드	설명
React.createContext()	Context 객체를 생성합니다
Context.Provider	컴포넌트에 컨텍스트 값을 제공합니다
Class.contextType	클래스 컴포넌트가 단일 컨텍스트를 소비할 수 있게 합니다
Context.Consumer	함수 컴포넌트가 컨텍스트에 구독할 수 있게 합니다

결론

그렇습니다, 여러분! 우리는 React Context의 땅을 여행하며, 그 생성에서 소비와 업데이트에 이르기까지 다루었습니다. Context는 React에서 강력한 도구로, prop drilling을 피하고 효과적으로 전역 상태를 관리할 수 있습니다.

기억하시기 바랍니다, 어떤 도구와 마찬가지로, Context는 항상 적절한 해결책이 아닙니다. 간단한 경우에는 props가 여전히 가장 좋은 선택일 수 있습니다. 하지만 많은 컴포넌트 간에 데이터를 공유해야 할 때, Context는 여러분의 새로운 최고 친구가 될 수 있습니다.

계속 연습하고, 코딩하고, 가장 중요한 것은 즐겁게 유지하세요! 다음에 만날 때까지, 행복한 React 개발을 기원합니다!

Credits: Image by storyset