#2 1-5 완료!

2주차리액트/이경은/begin-react/src/App.js

@@ -1,12 +1,26 @@
 import React from 'react';
 //컴포넌트를 불러와서 사용가능
 import Hello from './Hello';
+import Wrapper from './Wrapper';
+//1. jsx는 항상 태그로 감쌀 것!!
+//2. 변수를 보여줘야 할 경우 {} 사용
 
 function App() {
+  const name = 'kyeungeun';
+  const style = {
+    backgroundColor: 'black',
+    color: 'aqua',
+    fontSize: 24, // 기본 단위 px
+    padding: '1rem' // 다른 단위 사용 시 문자열로 설정
+  }
+
   return (
-    <div>
-      <Hello />
-    </div>
+    <Wrapper>
+    {/* Hello에서 name값을 사용하고 싶은 경우 props 사용 */}
+      <Hello style={style} name= {name}/>
+      <Hello style={style} />
+      <div style={style}>{name}</div>
+    </Wrapper>
   );
 }
 

2주차리액트/이경은/begin-react/src/Hello.js

@@ -1,8 +1,14 @@
 //리액트 컴포 넌트
 import React from 'react';
 
-function Hello() {
-  return <div>안녕하세요</div>
+//1. props는 객체 형태로 전달 ,파리미터 를 통하여 조회가능 
+//2. 
+
+function Hello({style,name}) {
+  return <div style={style}>안녕하세요{name}</div>
 }
+Hello.defaultProps = {
+    name: '이름없음'
+  }
 
 export default Hello;

2주차리액트/이경은/begin-react/src/Wrapper.js

@@ -0,0 +1,17 @@
+//1. 컴포넌트 태그 사이에 넣은 값을 조회 하고 싶을 때는
+//   props.children을 활용해라
+
+function Wrapper({children}) {
+  const style = {
+    border: '2px solid black',
+    padding: '16px',
+  };
+  return (
+    <div style={style}>
+        {/* props.children 렌더링 */}
+        {children}
+    </div>
+  )
+}
+
+export default Wrapper;