Reactjs에서 전역상태 관리

1. ContextAPI
임광규
2020.ReactJS 1

2. ContextAPI
리액트프로젝트에서전역적으로사용할데이터가있을때유용한기능입니다.
사용자로그인정보,애플리케이션환경설정,테마등여러종류의전역데이터관리시사용합니
다.
또한리덕스,리액트라우터,styled-components등의라이브러리는ContextAPI를기반으로
구현되어있습니다.
2020.ReactJS 2

3. ContextAPI를사용한전역상태관리흐름이해하기
리액트애플리케이션은컴포넌트간의데이터를props로전달하기대문에컴포넌트여기저기서필요
한데이터가있을때는주로최상위컴포넌트에서state를이용하여관리합니다.
최상위 컴포넌트에서 props로 state를 하위 컴포넌트까지 전달 해야하기때문에구조가복잡해집니
다.실제리액트프로젝트에서는더많은컴포넌트를거쳐야할때도있고다루어야하는데이터가훨씬
많아질수도있으므로이런방식을사용하면유지보수성이낮아집니다.
따라서리덕스나MobX같은상태관리라이브러리를사용하여전역상태관리작업을더욱편하게처
리하기도합니다.v16.3업데이트이후에는 Context API 가많이개선되어별도의라이브러리를
사용하지않아도전역상태를손쉽게관리할수있습니다.
2020.ReactJS 3

4. state를이용한상태관리
APP의state를하위컴포넌트로전달하여
상태관리
2020.ReactJS 4

5. Context를이용한상태관리
ContextAPI를이용하여전역상태관리
2020.ReactJS 5

6. ContextAPI예제
Context생성
import { createContext } from 'react';
const ColorContext = createContext({ color: 'red' });
export default ColorContext;
2020.ReactJS 6

7. Consumer사용(ColorBox컴포넌트)
색상을props로받아오는것이아니라Context안에있는Consumer라는컴포넌트를이용해서조회
합니다.
import React from 'react';
import ColorContext from './context';
export default () => {
return (
<ColorContext.Consumer>
{value => (
<div
style={{
with: '100px',
height: '80px',
background: value.color
}}
/>
)}
</ColorContext.Consumer>
);
}2020.ReactJS 7

8. Provider사용
Context의value를변경하기위해서는Provider를사용하면됩니다.
import React from 'react';
import ColorBox from './ColorBox';
import ColorContext from './context';
export default () => {
return (
<ColorContext.Provider value={{color: 'red' }}>
<ColorBox />
</ColorContext.Provider>
);
}
2020.ReactJS 8

9. 동적Context사용하기
import React, { createContext, useState } from 'react';
const ColorContext = createContext({
state: { color: 'red' },
action: { setColor: () => {} }
});
const ColorProvider = ({ children }) => {
const [color, setColor] = useState('red');
const value = { state: {color}, action: {setColor} };
return <ColorContext.Provider value={value}>{children}</ColorContext.Provider>;
}
const { Consumer: ColorConsumer } = ColorContext;
// Provider, Consumer 내보내기
export { ColorProvider, ColorConsumer };
export default ColorContext;
2020.ReactJS 9

10. 동적Provider설정
import React from 'react';
import ColorBox from './ColorBox';
import { ColorProvider } from './context';
export default () => {
return (
<ColorProvider>
<ColorBox />
</ColorProvider>
);
}
2020.ReactJS 10

11. 동적Consumer설정
import React from "react";
import { ColorConsumer } from "./context";
export default () => {
return (
<ColorConsumer>
{({ state, action }) => (
<>
<div
style={{
with: "100px",
height: "80px",
background: state.color
}}
/>
<button onClick={() => action.setColor("blue")}>blue</button>
</>
)}
</ColorConsumer>
);
};
2020.ReactJS 11

12. 동적Context예제바로가기
2020.ReactJS 12

13. Consumer대신Hook사용하기
import React, { useContext } from "react";
import ColorContext from "./context";
export default () => {
const { state, action } = useContext(ColorContext);
return (
<>
<div
style={{
with: "100px",
height: "80px",
background: state.color
}}
/>
<button onClick={() => action.setColor("blue")}>blue</button>
</>
);
};
2020.ReactJS 13

14. 마치며
컴포넌트간에상태를교류해야할때무조건부모==>자식흐름으로props를통해전달해주었는데
ContextAPI를통해더욱쉽게상태를교류할수있습니다.
전역적으로여기저기사용되는상태가있고컴포넌트의개수가많은상황이라면ContextAPI를사용
하는것을권장합니다.
2020.ReactJS 14