Context API 상태 관리 라이브러리

React에서 state와 props가 뒤엉켜서 무엇이 무엇에게서 정보를 내려 받고 어떤 props 속성들이 있는지 파악하기 힘들때 상태 관리 라이브러리를 사용하면 마치 DB warehouse 처럼 상태를 따로 관리할 수 있게 되어 편리하다. React의 대표적인 상태 관리 라이브러리로는 Redux, Mobx, Context API가 존재한다.

간단한 웹을 만들어보면서 Context API를 구성해보자

🚗 Set up

//react를 생성합니다 npx create-react-app contextapi

// style을 위해 다음 패키지를 설치합니다. 필수는 아니고 제가 편하자고 설치한 겁니다 npm i styled-components styled-reset styled-flex-component typography

상태 관리 라이브러리는 크게 스토어(데이터가 저장되는 곳)와 프로바이더 (칠드런에게 데이터를 줌), 컨슈머(데이터를 사용함) 으로 구성됩니다.

React package 내부에는 createContext가 존재합니다. 이를 이용해 Store를 생성해줍니다.

import React from "react"; const Store = React.createContext(null); export default Store;

생성한 Store는 다음과 같은 방식으로 사용할 수 있습니다. Provider의 자식에 Consumer를 사용한 것에 주의합시다.

* Consumer 태그 내(Consumer의 child)에서는 일반 html을 사용할 수 없습니다. 오로지 함수인 child만 작동합니다.

import Store from "store"; class AppContainer extends Component { state = { message: "hello guys" }; render() { return ( {test => test.message} ); } }

from http://darrengwon.tistory.com/180 by ccl(A) rewrite - 2020-03-23 18:20:24