diff --git a/README.md b/README.md
index 1e81ad1..5de8758 100644
--- a/README.md
+++ b/README.md
@@ -1,19 +1,6 @@
-# react-profile
+
props와 state의 차이점
-## 실행 방법
+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)
diff --git a/src/App.js b/src/App.js
index 6dfe67e..e7a890d 100644
--- a/src/App.js
+++ b/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 Hello React!
;
+ return
+
+
+
+
;
}
-}
+}
export default App;
diff --git a/src/Introduction.js b/src/Introduction.js
new file mode 100644
index 0000000..b7feb25
--- /dev/null
+++ b/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[index]});
+ index++;
+ }
+
+ return
+
{data.name}
+
+ 안녕하세요 저는 {data.university}대학교의 {data.major}과에 다니고 있습니다.
+ 올해는 {data.age}살인데 내년엔 {data.age+1}이에요.
+ 지금 기분은 {data.emotion}해요!
+
+
좋아하는 동물
+
+
;
+ }
+}
+
+export default Introduction;