[1주차] 함초롬 미션 제출합니다.

README.md

@@ -1,19 +1,6 @@
-# react-profile
+<h2> props와 state의 차이점 </h2>
 
-## 실행 방법
+props 는 부모 컴포넌트가 자식 컴포넌트에게 주는 값. 
+자식 컴포넌트에서는 props 를 받아오기만하고, 받아온 props 를 직접 수정은 불가.
+반면에 state 는 컴포넌트 내부에서 선언하며 내부에서 값을 변경 가능.
 
-```
-npm install
-npm run start
-```
-
-- npm install : 필요한 모든 패키지를 설치합니다. 처음 1번만 실행하면 됩니다.
-- npm run start : react 어플리케이션을 브라우저에서 실행합니다.
-
-## 미션 설명
-
-[미션 설명](./docs/mission-description/README.md)
-
-## 미션 제출 방법
-
-[미션 제출 방법](./docs/how-to-submit/README.md)

src/App.js

@@ -1,9 +1,52 @@
 import React, {Component} from 'react';
+import Introduction from './Introduction';
 
 class App extends Component {
+  constructor(props){
+    super(props);
+    this.state = {
+      info:[
+        {
+          key:1,
+          id:1, 
+          name:"최수민", 
+          university:"서강", 
+          major:"컴퓨터공학", 
+          age:25, 
+          emotion:"행복", 
+          animal:["사자", "토끼", "뱀"]
+        },
+      {
+        key:2, 
+        id:2, 
+        name:"이한길", 
+        university:"홍익" , 
+        major:"법학", 
+        age:29, 
+        emotion:"불행", 
+        animal:["펭귄"]
+      }, 
+      {
+        key:3, 
+        id:3, 
+        name:"김서영", 
+        university:"이화여자", 
+        major:"사이버보안학", 
+        age:22, 
+        emotion:"불행", 
+        animal:["웜", "트로이목마"]
+      }
+    ]
+    }
+  }
+
   render() {
-    return <div className="App">Hello React!</div>;
+    return <div className="App"> 
+      <Introduction data={this.state.info[0]}></Introduction>
+      <Introduction data={this.state.info[1]}></Introduction>
+      <Introduction data={this.state.info[2]}></Introduction>
+    </div>;
   }
-}
 
+}
 export default App;

src/Introduction.js

@@ -0,0 +1,30 @@
+import React, {Component} from 'react';
+
+class Introduction extends Component {
+  render() {
+    var data = this.props.data;
+    var animalData = this.props.data.animal;
+    var animalList = [];
+    var index=0;
+
+    while(index<animalData.length){
+        animalList.push(<li>{animalData[index]}</li>);
+        index++;
+    }
+
+    return <div className="Introduction">
+        <h1> {data.name} </h1>
+        <article> 
+            <p>안녕하세요 저는 {data.university}대학교의 {data.major}과에 다니고 있습니다.</p>
+            <p>올해는 {data.age}살인데 내년엔 {data.age+1}이에요.</p>
+            <p>지금 기분은 {data.emotion}해요!</p>
+        </article>
+        <h2>좋아하는 동물</h2>
+        <ul>
+            {animalList}
+        </ul>
+    </div>;
+    }
+}
+
+export default Introduction;