7-1-3 고도화

Author: taejs

chapter7-1-3/src/index.js

@@ -5,12 +5,34 @@ import './index.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
 
-const Display = ({ifTruthy = true, children}) => (ifTruthy) ? Children.only(children) : null;
+
+const findChild = (children, child) => 
+    Children.toArray(children)
+            .filter(c=> {
+                console.log(c.type);
+                return c.type === child
+            })[0];
+
+const whenTruthy = ({children}) =>
+    Children.only(children);
+
+const WhenFalsy = ({children}) =>
+    Children.only(children);
+
+const Display = ({ifTruthy=true, children}) => 
+    (ifTruthy) ?
+        findChild(children, whenTruthy) : 
+        findChild(children, WhenFalsy)
 
 const age = 21;
 ReactDOM.render(
     <Display ifTruthy={age >= 21}>
-        <h1>들어오세요</h1>
+        <whenTruthy>
+            <h1>들어오세요</h1>
+        </whenTruthy>
+        <WhenFalsy>
+            <h1>애들은 가!</h1>
+        </WhenFalsy>
     </Display>,
 document.getElementById('root')
 );