HOC

Author: taejs

chapter7-3-1/src/Expandable.js

@@ -20,4 +20,6 @@ const Expandable = ComposedComponent =>
                     {...this.state}
                     {...this.props} />
         }
-    }
+    }
+
+    export default Expandable;

chapter7-3-1/src/MenuButton.js

@@ -0,0 +1,19 @@
+import React, {Component} from 'react';
+class MenuButton extends Component {
+    componentWillReceiveProps(nextProps){
+        const collapsed = (nextProps.collapsed && nextProps.collapsed === true) ?true : false;
+        this.setState({collapsed});
+    }
+
+    render() {
+        const {children, collapsed, txt, expandCollapse} = this.props;
+        return (
+            <div className="pop-button">
+                <button onClick={expandCollapse}>{txt}</button>
+                {(!collapsed) ? <div className="pop-up">{children}</div> : ''}
+            </div>
+        )
+    }
+}
+
+export default MenuButton;

chapter7-3-1/src/index.js

@@ -1,17 +1,29 @@
-import React from 'react';
+import React, {Children} from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
-import App from './App';
 import * as serviceWorker from './serviceWorker';
 import Expandable from './Expandable';
+import MenuButton from './MenuButton';
 
+const Letter = /./g
 const ShowHideMessage = ({children, collapsed, expandCollapse}) =>
     <p onClick={expandCollapse}>
         {(collapsed) ? children.replace(Letter, 'x') : children}
     </p>
 const HiddenMessage = Expandable(ShowHideMessage);
 
-ReactDOM.render(<HiddenMessage />, document.getElementById('root'));
+const PopupButton = Expandable(MenuButton);
+
+ReactDOM.render(
+    <React.Fragment>
+        <HiddenMessage >
+        방가방가
+        </HiddenMessage>
+        <PopupButton hidden={true} txt="팝업 토글">
+            <h1>숨겨진 콘텐츠</h1>
+            <p>이 콘텐츠는 처음에 숨겨져있습니다.</p>
+        </PopupButton>
+    </React.Fragment>, document.getElementById('root'));
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.