React, Context API 기초 익혀보기

React 개발을 하다보면 전역적으로 상태관리를 해야할 때가 온다.

 

작은 시스템일수록 그럴일은 없지만,

 

시스템이 커질수록 쓸일이 생기기 마련이다.

 

 

 

그렇다고 프로젝트 초기부터, 이게 커질지 아닐지도 모르는데 Redux와 같은 상태관리 시스템을 도입하자니,

 

코드가 길어지고 상대적으로 개발시간이 다소 길어지는 것을 감수할 필요는 없다는 생각이 든다..

 

 

 

이 때, 딱 적당한것이 Context API인것같다.

 

처음부터 세팅해두고 시작할필요없이 (프로젝트 구조와 거의 무관하게) 쉽게 적용하여 쓸 수 있다.

 

이미 짜둔 코드에 몇줄 얹으면 끝이다.

 

 

 

시작에 앞서, context가 무엇인지 설명하자면 Consumer와 Provider를 통해 글로벌하게 state를 관리하는 도구이다.

 

이게 무슨말이냐면, 아주 유용한 연필을 하나 만들어두고 누구든 원하면 쓸수있게 Provider를 통해 연필을 전체적으로 공급한다.

 

그리고, 누구든 연필이 필요한 녀석(component)은 Consumer를 통해 그 연필을 가져다 쓸수있다는 말이다.

 

코드의 중복이나 상속의 상속의 상속...같은 낭비를 하지않을수 있으니 매우 유용하다고 볼수있다.

 

 

그러면 가장 기본적인 사용법을 알아본다.

import React, { creatContext } from 'react';

const { Provider, Consumer } = createContext();

class ItemProvider extends React.Component {
	state = {
    	item: null,
    }
    
    actions = {
    	onClear: () => {
        	this.setState({ item: null });
        },
        onGotTool: (tool) => {
        	this.setState({ item: tool })
        }
    }
    
	render() {
	    const { state, actions } = this;
        const value = { state, actions };
    	return(
        	<Provider value={ value }>
            	{ this.props.children }
            </Provider>
        )
    }
}

const ShowItem = () => (
	<Consumer>
    {
    	({ state, actions }) => (
        	<div>
            	<div>
                	<span>나의 도구: </span>
	                { state.item }
                </div>
				<div>
                	<p onClick={() => { actions.onGotItem('Hammer'); }}>도구 획득</p>
                </div>
            </div>
        )
    }
    </Consumer>
)

class App extends React.Component {
	render() {
    	return (
        	<ItemProvider>
            	<div><ShowItem /></div>
            </ItemProvider>
        )
    }
}