context 예제 만들어보기

배운 것들을 활용하면 그럴싸한 예제를 만들어 볼 수 있습니다.

예제로 다뤘던 것들을 생각해봅시다. 프로필 생성기도 만들었고, 게슈탈트도 다뤄봤습니다. 리액트 16에 새로 추가된 Fragment도 알고 있습니다. 이러한 것들을 이용하면 context에 대해서 그럴싸한 예제를 만들어 낼 수 있습니다. 

콘텍스트 예제 바로가기

앞에 것들을 활용한 예제입니다.

컴포넌트는 게슈탈트를 이용했습니다. 수락 버튼을 누르면 "님과 친구가 되었습니다"라는 멘트로 바뀌고 맨 위에 사람 옆의 숫자가 올라갑니다. 취소를 누르면 숫자가 다시 줄어들고 "님이 친구요청을 했습니다"라고 바뀌게됩니다. 제 코드도 공유해드릴테니 비슷하게 만들어보셔도 되고, 참고해서 따로 다른 형태라도 만들어보세요~

예제 만들기

우선은 콘텍스트를 만들어야 합니다. 

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

view raw store.js hosted with ❤ by GitHub

저는 리덕스와 최대한 비슷한 형태로 만들기 위해 src 디렉토리 안에 store라는 파일을 만들고 코드를 작성했습니다. 콘텍스트도 Store라는 변수 안에 담았습니다.

	//최상위 디렉토리에 .env 파일을 만들고 NODE_PATH=src 를 입력하시면 src을 기준으로 파일을 찾아갑니다.
	//그래서 store 앞에 아무것도 붙이지 않았습니다.
	import React, { Component } from 'react';
	import Presenter from './Presenter';
	import Store from 'store';
	class Container extends Component {
	constructor(props){
	super(props);
	this.state= {
	togglePermit: this._togglePermit,
	profile: {
	madeleine: {
	name:"madeleine",
	img:"https://randomuser.me/api/portraits/med/women/94.jpg",
	isPermit: false,
	},
	cindy: {
	name:"cindy",
	img:"https://randomuser.me/api/portraits/med/women/22.jpg",
	isPermit: false,
	},
	florence: {
	name:"florence",
	img: "https://randomuser.me/api/portraits/med/women/92.jpg",
	isPermit: false,
	},
	louis:{
	name:"louis",
	img: "https://randomuser.me/api/portraits/med/men/5.jpg",
	isPermit: false
	},
	dennis: {
	name: "dennis",
	img:"https://randomuser.me/api/portraits/med/men/19.jpg",
	isPermit: false
	}
	}
	}
	}
	render() {
	return (
	<Store.Provider value={this.state}>
	<Presenter />
	</Store.Provider>
	);
	}
	_togglePermit = (name) => {
	this.setState(prevState => {
	return {
	...prevState,
	profile: {
	...prevState.profile,
	[name]: {
	...prevState.profile[name],
	isPermit: !prevState.profile[name].isPermit
	}
	}
	}
	})
	}
	}
	export default Container;

view raw App.js hosted with ❤ by GitHub

생성자를 선언하고 그 안에 state를 정의했습니다. 또한 state를 Provider의 값으로 전달하기 때문에 필요한 함수도 state 안에 선언되어 있습니다. 여기서 주의할 점은 각 프로필에 isPermit이 정의되어 있다는 점과 생성자 안에 함수를 넣어도 bind(this)를 하지 않아도 되는 점입니다. 일단 각각의 프로필 안에 isPermit이라는 값이 있어야 저처럼 프로필 마다의 수락과 취소를 할 수 있습니다. 또 화살표 함수로 _togglePermit이라는 함수를 정의했기 때문에 bind(this)를 써서 따로 묶어줄 필요가 없습니다.

	import React from 'react';
	import { Box, Icon, Text } from 'gestalt';
	import 'gestalt/dist/gestalt.css';
	import Store from 'store';
	const friendNum = (profile) => {
	let Permit = [];
	// eslint-disable-next-line
	Object.keys(profile).map(name => {
	if(profile[name].isPermit){
	return Permit.push(profile[name]);
	}
	});
	return Permit.length
	}
	const NavPresenter = () => (
	<Box color="darkWash" display="flex" alignItems="center" padding={1} justifyContent="center" marginBottom={10}>
	<Box marginRight={1} padding={1}>
	<Icon
	icon="person"
	accessibilityLabel="Person"
	color="darkGray"
	size={32}
	/>
	</Box>
	<Text align="center" size="xl" bold={true}>
	<Store.Consumer>
	{store => friendNum(store.profile)}
	</Store.Consumer>
	</Text>
	</Box>
	);
	export default NavPresenter;

view raw nav.js hosted with ❤ by GitHub

네비게이션에서는 friendNum이라는 함수를 정의했습니다. 프로필에서 Permit이 true인 친구목록을 만들어서 숫자를 리턴하는 함수입니다. 이 함수를 정의하고 나서 컴포넌트 안에서는 컨슈머를 통해 프로필을 가져와서 friendNum이라는 함수 안에 넣었습니다.

이처럼 게슈탈트와 같은 프레임워크를 이용하면 깔끔하게 사용할 수 있는 컴포넌트를 빠르게 얻을 수 있고, 그럴싸한 예제를 만들 수 있습니다. 한번 만들어보세요. 프로그래밍의 재미를 느껴보세요!

다음 포스팅은 styled components를 다뤄보도록 하겠습니다.

공감은 제작자에게 큰 힘이 됩니다.