React Context

Context 이해하기

Context란 리액트 컴포넌트의 트리 전체를 대상으로 데이터를 공급하는 기능이다

컴포넌트 간에 데이터를 전달하는 방법중에 Props를 사용하여 전달할 수 있지만
Props는 컴포넌트 트리에서 언제나 부모에서 자식으로 단방향으로 전달되어진다.
리액트에서는 자식의 자식, 즉 트리에서 2단계 이상 떨어져 있는 컴포넌트에 직접 데이터를 전달하는것은 불가능하다
그러면 A컴포넌트 밑에 B컴포넌트가 있고 B컴포넌트 밑에 C, D컴포넌트가 존재한다고 과정했을 때,
A컴포넌트가 C,D컴포넌트에 데이터를 전달하려면 어떻게해야 할까?
B컴포넌트에 전달하고 B컴포넌트에서 다시 C,D로 뿌려줘야한다
이것을 마치 드릴로 땅을 파고 내려가는 것과 같다해서 Props Drilling문제라고 불린다.
이를 해결하는 방법이 바로 Context이다 context를 이용하면 단계마다 일일이 props를 전달하지 않고도,
컴포넌트 트리 전역에 데이터를 공급할 수 있다

ContextAPI란 Context를 만들고 다루는 리액트의 기능이다

---

사용법

Context를 생성시 반드시 컴포넌트 밖에서 생성해야 한다 만약 안에서 생성하게되면 해당 컴포넌트가 리렌더될 때마다 Context를 새롭게 생성하여 의도처럼 되지 않는다.

// ContextAPI에서 새 Context를 만드는 createContext 기능을 사용하기 위해서는 react 라이브러리의 React 객체를 불러와야 한다 
import React, {useContext} from 'react';
// createContext 메서드를 호출해 새로운 Context를 만든다, 인수로 전달하는 값은 Context의 기본값으로 생략가능하다
const MyContext = React.createContext(defaultValue);

// Context.Provider는 Context 객체에 기본으로 포함된 컴포넌트이다
// 위에서 생성한 MyContext의 Provider를 App컴포넌트의 자식으로 배치한 후 해당 Provider 밑으로 데이터를 공유하고자하는 자식 컴포넌트들을 배치함으로써 Props를 전달할 수 있다 
// Props로 전달할 값들을 하기 예제처럼 Provider를 배치할때 value값으로 전달해두면 된다.

// useContext를 이용하면 자신이 속한 그룹의 Contex가 제공하는 값을 불러올 수 있다
// 만약 useContext를 호출한 컴포넌트가 인수로 전달한 Context 그룹에 속해 있지 않으면 오류가 발생한다.
function App() {
    const data = 'data';
    return (
        <div>
            <Header/>
            <MyContext.Provider value={data}>
                <Body/>
            </MyContext.Provider>
        </div>
    );
   }
function Body () {
    // useContext를 호출하고 인수로 값을 공급할 Context를 전달한 후 함수 useContext는 해당 Context가 공급하는 값을 반환한다 반환한 값을 변수 data에 저장한다 
    const data = useContext(MyContext);
}