React : Context API에 대해서 알아보자

Props의 경우 상위에서 하위 컴포넌트로 전달하고자 할 때, 전달하고자 하는 하위 컴포넌트까지 계속해서 전달해야 하는 상황(props drilling)이 발생한다. Context API는 이런 상황을 방지하고, 컴포넌트 트리 내에서 전역적으로 데이터를 공유하게 하는 기능을 제공한다. 

• const context명 = createContext(); 
• <context.Provider value={{전달할 값}}>
• const 변수명 = useContext(context명);

 

Context API 사용하지 않았을 때

Context API를 사용하지 않으면 Inner.jsx에서 해당 state를 사용하기 위해서는 Comp1.jsx에서 Outer.jsx로 props를 통해 전달하고, 이후 Outer.jsx에서 Inner.jsx로 props를 통해서 전달해야 한다(props drilling). 

 

Context API 사용 예제

1. Context 생성

파일을 따로 생성해서 전역적으로 사용할 데이터를 작성한다. createContext()를 통해 생성하고, Provider를 통해 context 값을 제공한다. 

import { createContext, useState } from "react";

// TextContext라는 이름의 Context를 생성한다.
export const TextContext = createContext();

export function TextProvider({children}){
    const [text, setText] = useState("");

    return(
        //TextContext.Provider를 통해서 TextProvider 컴포넌트 내부에 있는 자식 컴포넌트들에 전부 state를 전달한다.
        <TextContext.Provider value={{text, setText}}>
            {children}
        </TextContext.Provider>
    );
}

 

2. Context 사용

(1) 데이터를 전달할 컴포넌트를 context를 포함하고 있는 컴포넌트로 감싼다.

import { useState } from "react";
import Outer from "./Outer";
import { TextProvider } from "../providers/TextProvider";

export default function Comp(){
    const [text, setText] = useState("");

    return(
    //Outer를 TextProvider(context가 있는 컴포넌트)로 감싼다. 즉 자식 컴포넌트로 만든다.
        <TextProvider>
            <Outer/>
        </TextProvider>
    )
}

 

(2) 데이터를 사용할 컴포넌트에서 useContext(context명)을 통해서 불러와 사용한다.

import { useContext } from "react";
import { TextContext } from "../providers/TextProvider";

export default function Inner() {
    const {text, setText} = useContext(TextContext);
    return (
        <div>
            <input value={text} onChange={(e) => setText(e.target.value)} />
            <h1>{text}</h1>
        </div>
    );
}

 

Outer.jsx의 경우에는 props를 전달할 필요가 없어진다. 

 

이렇게 유용한 API이지만 단점이 있다면 Context Provider의 값이 변경되면 해당 Provider를 구독하고 있는 모든 하위 컴포넌트가 다시 렌더링이 된다는 점이다. 불필요한 재렌더링으로 인하여 성능 문제가 발생할 수 있다. 이런 문제때문에 Context API의 사용이 최근 많이 줄게되었다.