From 6ab1fc19b4cbca171fc79fff4a059deb6f58a5a9 Mon Sep 17 00:00:00 2001
From: kiie9017 <39763880+kelee98@users.noreply.github.com>
Date: Thu, 20 May 2021 03:02:06 +0900
Subject: [PATCH] =?UTF-8?q?#2=201-5=20=EC=99=84=EB=A3=8C!?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../begin-react/src/App.js"                   | 20 ++++++++++++++++---
 .../begin-react/src/Hello.js"                 | 10 ++++++++--
 .../begin-react/src/Wrapper.js"               | 17 ++++++++++++++++
 3 files changed, 42 insertions(+), 5 deletions(-)
 create mode 100644 "2\354\243\274\354\260\250\353\246\254\354\225\241\355\212\270/\354\235\264\352\262\275\354\235\200/begin-react/src/Wrapper.js"

diff --git "a/2\354\243\274\354\260\250\353\246\254\354\225\241\355\212\270/\354\235\264\352\262\275\354\235\200/begin-react/src/App.js" "b/2\354\243\274\354\260\250\353\246\254\354\225\241\355\212\270/\354\235\264\352\262\275\354\235\200/begin-react/src/App.js"
index 094b26f..60f6b2f 100644
--- "a/2\354\243\274\354\260\250\353\246\254\354\225\241\355\212\270/\354\235\264\352\262\275\354\235\200/begin-react/src/App.js"
+++ "b/2\354\243\274\354\260\250\353\246\254\354\225\241\355\212\270/\354\235\264\352\262\275\354\235\200/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>
   );
 }
 
diff --git "a/2\354\243\274\354\260\250\353\246\254\354\225\241\355\212\270/\354\235\264\352\262\275\354\235\200/begin-react/src/Hello.js" "b/2\354\243\274\354\260\250\353\246\254\354\225\241\355\212\270/\354\235\264\352\262\275\354\235\200/begin-react/src/Hello.js"
index 6df0f5d..6bfa991 100644
--- "a/2\354\243\274\354\260\250\353\246\254\354\225\241\355\212\270/\354\235\264\352\262\275\354\235\200/begin-react/src/Hello.js"
+++ "b/2\354\243\274\354\260\250\353\246\254\354\225\241\355\212\270/\354\235\264\352\262\275\354\235\200/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;
\ No newline at end of file
diff --git "a/2\354\243\274\354\260\250\353\246\254\354\225\241\355\212\270/\354\235\264\352\262\275\354\235\200/begin-react/src/Wrapper.js" "b/2\354\243\274\354\260\250\353\246\254\354\225\241\355\212\270/\354\235\264\352\262\275\354\235\200/begin-react/src/Wrapper.js"
new file mode 100644
index 0000000..099ee08
--- /dev/null
+++ "b/2\354\243\274\354\260\250\353\246\254\354\225\241\355\212\270/\354\235\264\352\262\275\354\235\200/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;
\ No newline at end of file