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;