Woongjae Lee
NHN Dooray - Frontend Team
import { Provider } from 'mobx-react';
import * as React from 'react';
import BoardContainer from '../game/BoardContainer';
import stores from '../stores';
const App = () => (
<Provider {...stores}>
<BoardContainer />
</Provider>
);
export default App;
import { inject, observer } from 'mobx-react';
import { Stores } from '../stores';
import Board from './Board';
export default inject((stores: Stores) => ({
board: stores.gameStore.board,
}))(observer(Board));
Provider
inject
import { inject, observer } from 'mobx-react';
import { Stores } from '../stores';
import Board from './Board';
export default inject((stores: Stores) => ({
board: stores.gameStore.board,
}))(observer(Board));
import * as React from 'react';
import { Segment } from 'semantic-ui-react';
import Row from './Row';
import { StoneType } from './GameStore';
const styles = {
rowsContainer: {
display: 'flex',
flex: 1,
flexDirection: 'column' as 'column',
height: '100%',
width: '100%',
},
};
interface Props {
board: StoneType[][];
}
const renderRows = (board: StoneType[][]) =>
board.map((row, i) =>
<Row columns={row} key={i} />
);
const Board = ({ board }: Props) => (
<Segment className="board">
<div style={styles.rowsContainer}>
{renderRows(board)}
</div>
</Segment>
);
export default Board;
Container component
Presentational component
const number = observable(1);
const disposer = autorun(
'trackNumberChange',
() => {
console.log(number.get()));
},
);
number.set(1); // prints '1'
number.set(2); // prints '2'
number.set(3); // prints '3'
disposer();
numbers.set(4); // prints nothing
autorun
originerd@gmail.com
By Woongjae Lee
타입스크립트 한국 유저 그룹 리액트 스터디 201706