Context

 

 

  이번에 학습한 Context는 프로젝트에서 사용했던 기술이다. 사실 제대로 적용이 안 돼서 포기하고 커스텀 hook의 형태로 recoil로 전역에서 관리할 수 있도록 만들어서 사용하긴 했다. 단순히 색상코드나 폰트 크기를 네이밍하기 위해서 사용했는데, 지금 와서 Context를 제대로 공부해 보니 결국 제작했던 hook이 Context와 같은 방식으로 만들어졌음을 확인했다.

  React의 Context는 컴포넌트 간에 전역적으로 데이터를 공유하기 위한 기능이다. 기본적으로 Class Component를 기반으로 구현되었지만, React v16.8 버전부터 Function Component에서도 사용할 수 있게 업데이트되었다. 

  Function Component에서 Context를 사용하기 위해선 React의 useContext hook을 사용해야 한다. 그전에 우리가 Context로 사용할 default 값을 정해줘야 한다. 나는 따로 파일을 export해서 전역에서 사용할 수 있게 구성했다.

import React from 'react';

export Context = React.createContext('defaultValue');

컴포넌트에서 사용할 때는 이렇게 한다.

import React, { useContext } from 'react';
import Context from './Context';

function MyComponent() {
	const value = useContext(Context);
    return (
    	<div>{value}</div>
    )
}

MyComponent 컴포넌트를 렌더링하면 defaultValue라는 문자열이 출력된다.

 

  Provider 기능을 사용하면 특정 지역에서 특정 Context를 사용할 수도 있다.

import React from 'react';
import Context from './Context';

function YourComponent() {
	return (
    	<Context.Provider value={'new Context'}>
        	<ChildComponent />
        </Context.provider>
    )
}

위와 같이 사용하면 ChildComponent부터 그 하위 컴포넌트의 Context 값이 defaultValue 문자열이 아닌 new Context 문자열이 된다. 이렇게 지역적으로 특정해서 Context를 사용할 수도 있다.

 

  Context를 중첩해서도 사용할 수 있다.

import React, { useContext } from 'react';
import ThemeContext from './Context';
import UserContext from './Context';

function App() {
	return (
    	<ThemeContext.Provider value="dark">
        	<UserContext.Provider value="John">
            	<Header />
                <Main />
            </UserContext.Provider>
        </ThemeContext.Provider>
    )
}

function Header() {
	const theme = useContext(ThemeContext);
	const user = useContext(UserContext);
	return (
		<header style={{ backgroundColor: theme }}>
			<h1>Hello, {user}!</h1>
		</header>
	);
}

function Main() {
	const theme = useContext(ThemeContext);
	const user = useContext(UserContext);
	return (
		<main style={{ backgroundColor: theme }}>
			<h1>Welcome, {user}!</h1>
		</main>
	);
}

ThemeContext와 UserContext라는 두 개의 Context 객체를 생성하고, App 컴포넌트에서 이를 중첩하여 Provider 컴포넌트를 사용하고 있다. Header와 Main 컴포넌트에서는 각각의 Context 값을 가져와서 사용한다. 이렇게 Context를 중첩하여 사용하면 각각의 컴포넌트에서 필요한 값만을 가져와서 사용할 수도 있다.

 

  Context를 사용하는 것은 컴포넌트의 재사용성과 유지보수성을 높이는데 많은 도움을 준다. Context를 사용하면 여러 컴포넌트에서 공통적으로 사용하는 값을 한 곳에서 관리할 수 있기 때문이다. 하지만 과용하면 코드의 복잡성이 증가할 수 있기 때문에 적절한 사용이 필요하다.