Conversation
MrKwon
left a comment
MrKwon
left a comment
There was a problem hiding this comment.
안녕하세요 수완님, 리뷰어 민철입니다 🤠
리뷰가 조금 늦었네요. 😂
전체적으로 미션 잘 구현해주셨습니다.
추가적으로 필요한 부분에 대하여 코멘트 남겨두었으니 확인해주세요.
내일 스터디에서 보아요~
| @@ -0,0 +1,30 @@ | |||
| <html> | |||
| super(props); | ||
| this.state = { | ||
| members : [ | ||
| {name:'최수민', school:'서강', major:'컴퓨터공학', |
There was a problem hiding this comment.
{ key: value } 형식으로 만든 객체를 JSON(JavaScript Object Notation) 이라고 해요.
JSON 위키 백과 링크인데 학습에 참고하시면 좋을 것 같아요.
근데 이 안에 데이터가 많아지기 시작하면 한 줄에 쓰는 것 보다 줄을 나눠서 쓰는 게 더 보기 좋아요.
자바스크립트 스타일 가이드 인데 여기 중간에 보시면 Object Rules 라는 소제목 부분을 보면 짧은 객체들은 한 줄로 압축해서 표현해도 되지만 길어지면 줄을 나눠서 표기하는 것을 추천(?)하고 있네요 😂
| this.state = { | ||
| members : [ | ||
| {name:'최수민', school:'서강', major:'컴퓨터공학', | ||
| age:25, emotion:'행복',animal:['사자','토끼','뱀']}, //최수민 정보 |
There was a problem hiding this comment.
모든 네이밍은 의도와 역할이 명확히 드러나도록 해주시는게 좋아요!
ex) animal -> favoriteAnimalList
| <Profiles data={this.state.members[0]}></Profiles> | ||
| <Profiles data={this.state.members[1]}></Profiles> | ||
| <Profiles data={this.state.members[2]}></Profiles> |
|
|
||
| class Profiles extends Component { | ||
| render() { | ||
| var data = this.props.data; |
| var data = this.props.data; | ||
| var lists = []; | ||
|
|
||
| var Animals = []; |
|
|
||
| var Animals = []; | ||
| var i= 0; | ||
| while (i < data.animal.length) { |
| <div key={data.name}> | ||
|
|
||
| <h1>{data.name}</h1> | ||
| <div>{`안녕하세요 저는 ${data.school}대학교의 ${data.major}과에 다니고 있습니다.`}</div> | ||
| <div>{`올해는 ${data.age}살인데 내년엔 ${(data.age)+1}예요.`}</div> | ||
| <div>{`지금 기분은 ${data.emotion}해요!`}</div> | ||
|
|
||
| <h3>좋아하는 동물</h3> | ||
| {Animals} | ||
|
|
||
| </div> | ||
| ); | ||
|
|
||
| return ( | ||
|
|
||
| <article> | ||
| {lists} | ||
| </article> | ||
| ); |
There was a problem hiding this comment.
이 부분에 줄 바꾸기는 혹시 의도적이신가요?
불필요한 줄 바꿈을 없애서 조금 더 보기 좋게 만들어 볼까요?
|
|
||
| return <div className="App"> | ||
|
|
||
| <Profiles data={this.state.members[0]}></Profiles> |
There was a problem hiding this comment.
| <Profiles data={this.state.members[0]}></Profiles> | |
| <Profile data={this.state.members[0]}/> |
- 1명에 대한 정보만 담고있으니 Profile이라는 네이밍이 더 적절할 것 같아요!
- children이 없는 경우 self closing으로 작성해주세요~ 참고
| this.state = { | ||
| members : [ | ||
| {name:'최수민', school:'서강', major:'컴퓨터공학', | ||
| age:25, emotion:'행복',animal:['사자','토끼','뱀']}, //최수민 정보 |
There was a problem hiding this comment.
모든 네이밍은 의도와 역할이 명확히 드러나도록 해주시는게 좋아요!
ex) animal -> favoriteAnimalList
| } | ||
|
|
||
| lists.push( | ||
| <div key={data.name}> |
There was a problem hiding this comment.
어차피 1번만 push되기 때문에 굳이 lists 변수에 넣을 필요 없이 이 내용 그대로 return문에 써주시면 되세요!
| <div key={data.name}> | ||
|
|
||
| <h1>{data.name}</h1> | ||
| <div>{`안녕하세요 저는 ${data.school}대학교의 ${data.major}과에 다니고 있습니다.`}</div> |
3 participants
No description provided.