Context와 API 속성

Context 이해하기 

• Context API는 데이터를 전역적으로 관리하고 사용할 수 있는 기능이다.
• 컴포넌트의 속성은 부모 컴포넌트가 자식 컴포넌트로 어떤 정보를 전달하려고 할 때 사용하는 메커니즘인데, 부모 컴포넌트가 직계 자식이 아닌 손자나 증손자 컴포넌트에 속성을 전달하려고 하면 상당히 번거로운 '지속적인 속성 전달'을 해야한다. 이런 번거로움을 덜고자 Context라는 메커니즘을 구현하였다.
• Context는 리액트나 리액트 네이티브에서 createContext와 useContext 훅을 통해 이루어진다.
• Context 기능을 사용하는 코드는 항상 이름에 'Provider'가 들어간 컴포넌트와 use콘텍스트_이름() 형태의 커스텀 훅을 사용한다. 

https://react.vlpt.us/basic/22-context-dispatch.html

22. Context API 를 사용한 전역 값 관리 · GitBook

CreateContext 함수

createContext 함수의 파라미터로 Context의 기본 값을 지정해서 Context를 생성할 수 있다.

const Context = createContext(defaultValue);

Consumer 컴포넌트

위에서 생성된 Context 객체는 입력된 기본 값 외에도 Consumer 컴포넌트와 Provider 컴포넌트를 갖고 있다.

Consumer 컴포넌트는 Context의 내용을 읽고 사용할 수 있다.

Consumer 컴포넌트는 상위 컴포넌트 중 가장 가까운 곳에 있는 Provider 컴포넌트가 전달하는 데이터를 이용한다. 만약 상위 컴포넌트 중 Provider 컴포넌트가 없다면 createContext 기본 값을 사용한다.

const userContext = createContext({name: "suyeon"});
export default userContext;

const User = () => {
	return (
    	<userContext.Consumer>
        	{value => <Text>Name: {value.name}</Text>}
        </userContext.Consumer>
    );
}

Consumer 컴포넌트의 자식은 반드시 리액트 컴포넌트로 반환하는 함수여야 하고, 이 함수는 Context의 현재 값을 파라미터로 전달받아 데이터를 사용할 수 있다.

Provider 컴포넌트

Provider 컴포넌트는 하위 컴포넌트에 Context의 변화를 알리는 역할을 한다.

Provider 컴포넌트는 value를 받아서 모든 하위 컴포넌트에 전달하고, 하위 컴포넌트는 Provider 컴포넌트의 value가 변경될 때마다 다시 렌더링된다.

Provider 컴포넌트를 사용할 땐 반드시 value를 지정해야 하고, Consumer 컴포넌트는 가장 가까운 Provider 컴포넌트가 전달하는 값을 이용한다. 

즉, Provider 컴포넌트를 사용하면 Context를 생성할 때 기본 값이 아닌 Provider 컴포넌트이 value로 지정된 값이 나온다.

...
const App = () => {
	<userContext.Provider value={{name: "suyeon"}}>
    ...
    </userContext.Provider>
}

useContext 함수

useContext 함수는 Consumer 컴포넌트의 자식함수로 전달되던 값과 동일한 데이터를 반환한다. (따라서 Consumer를 사용하지 않고 Context 내용을 사용할 수 있게 해준다.)

Consumer 컴포넌트를 사용할 때는 Consumer 컴포넌트의 자식으로 반드시 리액트 컴포넌트를 반환하는 함수를 넣어야 했기에 useContext를 이용하는 것이 훨씬 가독성이 좋다. 

const User = () => {
	const {user} = useContext(userContext);
    return <Text>Name: ${user.name}</Text>;
}