React 상태관리 (Context, Redux)

React 상태관리

 

1. Context

 - 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있습니다.

 

<GrandMother>

 

<Mother>

 

<Me>

 

<GrandMother>의 컴포넌트에 있는 state,prop의 정보를 <Mother> 컴포넌트를 거치지 않고 <Me> 에게 바로 전달 해줄 수 있다

 

주의) context 사용시 컴포넌트를 재사용하기 어려워질 수 있다.

 

사용법

 

const MyContext = React.createContext(defaultValue)

or

import {createContext} from 'react'

const MyContext = createContext(defaultValue)

// defaultValue는 트리 안에서 적절한 Provider를 찾지 못했을 때만 쓰이는 값

 

사용할값 : {

   name : "LEE"

   age : 27

}

<MyContext.Provider value = {사용할 값} >

    <ChildComponent/> // {사용할 값}을 사용하기 위한 하위 컴포넌트

</MyContext.Provider>

 

Context 오브젝트에 포함된 React 컴포넌트인 Provider는 context를 구독하는 컴포넌트들에게 context의 변화를 알리는 역할을 합니다.

 

생성된 Context는 Provider과 Consumer을반환하여 최상위 컴포넌트를 Provider로 감싸면 하위에 있는 컴포넌트들은 Provider에 value로 설정한 값을 Consumer로 받아 value값들을 사용할 수 있습니다.

 

참고

https://ko.reactjs.org/docs/context.html