React의 컨텍스트

다음 훅에 대해 학습하기 전에, React에서 컨텍스트 개념을 살펴볼 필요가 있습니다.

일반적으로 우리는 프롭스(props)를 사용하여 부모 컴포넌트로부터 자식 컴포넌트로 데이터를 전달했습니다. 이 방법은 컴포넌트가 많지 않고 프롭스를 부모로부터 필요한 컴포넌트까지 자식 컴포넌트를 통해 2-3번 이상 전달하지 않아도 되는 경우에 좋습니다.

이 방법은 중간 컴포넌트에서 이러한 프롭스가 전혀 사용되지 않는 경우(이러한 문제를 prop drilling라고 합니다), 또는 동일한 데이터를 많은 수의 컴포넌트에 전달해야 하는 경우 매우 불편해지고 다양한 문제를 일으킬 수 있습니다.

이러한 경우 컨텍스트가 도움이 될 수 있으며, 컨텍스트는 부모 컴포넌트의 데이터를 프롭스를 통해 전달하지 않고도, 컴포넌트 트리에서의 위치에 관계없이 모든 자식 컴포넌트가 사용할 수 있도록 합니다. 따라서 데이터는 필요한 컴포넌트만 받게 됩니다.

컨텍스트를 사용하려면, 먼저 생성해야 합니다. 먼저, MyContext.js 파일을 생성하고 여기에 createContext 함수를 임포트하겠습니다:

import { createContext } from 'react';

이제 컨텍스트 객체를 생성하고, 변수 MyContext에 할당하며, 내보내는 것을 잊지 마세요. 우리의 경우, createContext에 초기값으로 null을 설정했습니다, 왜냐하면 우리에게는 중요하지 않기 때문입니다(빈 괄호로 남겨둘 수도 있었습니다). 기본값은 다른 값을 찾을 수 없을 때 컨텍스트를 읽을 때 나타납니다. 이 값은 모든 타입이 될 수 있습니다:

export const MyContext = createContext(null);

다음 수업에서 우리는 별도의 파일에 위치한 여러 컴포넌트로 구성된 애플리케이션을 만들 것입니다. 모든 컴포넌트가 하나의 파일에 있었다면, 컨텍스트 생성을 위해 별도의 파일을 만들지도 않았고 내보내지도 않았을 것입니다.

이제 MyContext.js를 빈 컴포넌트 App, 즉 데이터를 전송하려는 컴포넌트에 임포트해 보겠습니다:

import { MyContext } from './MyContext.js';

수업에 설명된 대로 MyContext.js 파일을 생성하고 빈 컴포넌트 App에 임포트하세요.