[context API]기본

리덕스와 마찬가지로 글로벌하게 상태관리가 가능하다.

다만 따로 설치하지 않아도 리액트에서 기본으로

지원하는 API기 때문에 호출해서 쓰기만 하면된다.

 

사용법

예제) 인풋과 텍스트는 형제 컴포넌트이지만 context api를 이용하여

인풋에서 작성한 값을 텍스트가 받아 폰트 크기를 변화시킴.

 

1. 먼저 글로벌하게 관리할 state를 모아놓을 provider(store)를 만든다.

 

application_context.js

import React from 'react';
import { createContext, useContext, useState } from 'react';

const Context = createContext(); //createContext 선언

export function ApplicationContextProvider({ children, font: init }) {//관리대상들을 감쌀놈
	const [font, setFont] = useState(init); //글로벌하게 관리할 state

	const value = {
		font,
		setFont
	};

	return <Context.Provider value={value}>{children}</Context.Provider>;
    //children 자리에 감싸질 컴포넌트가 들어올 것
}
export function useApplicationContext() {//형제 컴포넌트에서 context 를 사용할때 쓸놈
	return useContext(Context);
} 

 

app.js

import React from 'react';
import Bro from './components/bro';
import Brotwo from './components/brotwo';
import { ApplicationContextProvider } from './application_context'; //provider 를 불러옴
function App() {
	return (
		<ApplicationContextProvider font={20}> //형제들을 감싸줌
			<Bro />
			<Brotwo />
		</ApplicationContextProvider>
	);
}

export default App;

위와같이 아까 만든 provider로 글로벌한 상태값이 필요한 컴포넌트를 감싸준다.

 

bro.js

import React from 'react';
import Child from './childBro';

function View() {
	return (
		<div>
			<Child />
		</div>
	);
}

export default View;

 조금더 꼬아보려고 bro 안에 child 라는 컴포넌트를 넣었다.

 

childbro.js

(text)

import React from 'react';
import { useApplicationContext } from '../application_context';

function Child() {
	const { font } = useApplicationContext();

	return <div style={{ fontSize: `${font}px` }}>Child..</div>;
}

export default Child;

 그리고 그 안에 child 에선 위와같이 useApplicationContext 를 불러와서 그안의 state 를 가져와서 사용한다.

 

brotwo.js

 (input)

import React from 'react';
import { useApplicationContext } from '../application_context';

function Input() {
	const { setFont } = useApplicationContext();

	const handleChange = ({ target: { value } }) => {
		setFont(value);
	};

	return <input placeholder="fontSize" onChange={handleChange} />;
}

export default Input;

마찬가지로 store에 있는 state 중 setFont 를 불러와서 인풋에서 적히는 값이 state에 전달될 수 있게 만들어준다.

 

이런식이면 형제간의 state 공유가 가능해 진다.