/ REACT

Context API 란?

React은 다음과 같이 구성되어 있습니다.




오늘은 Context API라는 것이 무엇인지, 사용법이 무엇인지에 대해서 간단히 알아보겠습니다.

Context API

React로 개발을 할 때, 부모 컴포넌트에 정의된 state를 자식컴포넌트들에서 사용하려면 props를 통해서 차례대로 자식에게 전달해주어야 합니다. 작은 규모의 개인 프로젝트의 경우에는 props로 몇번 전달해주면 되지만, 규모가 크고 여러 컴포넌트가 겹쳐있는 경우에는 props로 state를 전달하는 것은 매우 귀찮고 관리하기도 복잡해질 수 있습니다.
그래서 이러한 경우, props 대신에 사용할 수 있는 것이 크게 2가지라고 볼 수 있습니다. 첫번째는 Context API를 이용하는 방법, 두번째는 Redux같은 외부 라이브러리를 사용하는 방법이 있습니다. 보통 외부 라이브러리를 사용하는 것이 일반적으로 많이 쓰는 방법이지만 이 글에서는 Context API에 대해서 알아보겠습니다.

사용법

App 컴포넌트 하위에 Detail 컴포넌트가 있다고 가정하고 시작하겠습니다.

// App.js
import React, { createContext, useState } from 'react';

export let Context1 = createContext();

function App() {
    const [numbers, setNumbers] = useState([1,2,3]);

    return (
        // ....
    )
}

일단 위와 같이 컨텍스트를 만들어야합니다. Context1이라는 변수에 createContext()라는 함수를 통해서 컨텍스트라는 것을 만들어 저장합니다.(import는 필수)
numbers라는 state를 Detail 컴포넌트에 공유해볼겁니다.

// App.js
import React, { createContext, useState } from 'react';

export let Context1 = createContext();

function App() {
    const [numbers, setNumbers] = useState([1,2,3]);

    return (
        <Context1.Provider value={ { numbers } } >
            <Detail />
        </Context1.Provider>
    )
}

컨텍스트를 만든 후, numbers를 사용할 Detail 컴포넌트를 ‘'로 감싸줍니다. 그러면 Detail 컴포넌트를 비롯해서 그 하위 컴포넌트 모두 numbers를 사용할 수 있는 준비를 마쳤습니다. value라는 속성에 공유할 state값을 {} 형태로 넣어줍니다.

// Detail.js
import { useContext } from "react";
import { Context1 } from "./App.js"; // App에서 만든 Context1 불러옴

function Detail(){
  let {numbers} = useContext(Context1); // useContext()안에 인자로 불러온 Context1을 넣기

  return (
    <div>{numbers}</div>
  )
}

Detail.js에 와서 App에서 만든 Context1을 import 해준 다음, useContext()라는 것을 사용하여 Context1을 인자로 담아주면 됩니다. 이렇게 해주면 위처럼 numbers라는 state를 props 없이 사용할 수 있게됩니다.



상황에 따라서 그냥 props를 사용하는 것보다 복잡하게 느껴질 수도 있고 편리하게 느껴질 수도 있습니다.

Context API 단점

Context API는 렌더링에 있어 성능 이슈가 존재합니다. state가 변경될 때 마다 구독하는 모든 컴포넌트가 쓸데없이 리렌더링 되기 때문입니다. 또한 useContext()를 사용하는 컴포넌트를 다른 파일에서 재사용할 경우 Context를 import하는 게 다소 귀찮아질 수 있습니다.




End.