5강 - 고객 컴포넌트 구조화하기 [React와 Node.js를 활용한 고객 관리 시스템 개발 강의]
https://www.youtube.com/watch?v=UT9U9WALGS0&list=PLRx0vPvlEmdD1pSqKZiTihy5rplxecNpz&index=5
한명의 고객이 가지고 있는 정보가 많아질 경우, 분리해서 계층적으로 구성한다.
분리하는 방법을 알아 본다.
변수에 id와 image를 추가해 준다.
고객 컴포넌트 분리
계층적으로 관리하기 위해 분할
({this.props.id}) 이걸 자바스크립트 연산이나 특별한 문법으로 오해하기 쉬운데, 전혀 아님! JSX에서는 중괄호 {}만 의미 있음. 소괄호 ()는 그냥 텍스트. Jason 123과 Jason (123) 차이
소괄호 갯수가 부족해서 에러발생> 수정함. 여기서 this는 이 컴포넌트 밖에 있는 인스턴스들을 끌고 오는 역할을 한다. 일종의 리모콘. 이 컴포넌트 객체 안에는 생일, 성별, 직업을 넣을 수 있는 빈방이 있고, 여기에 this로 외부(여기서는 App 객체안에 있는 값)에서 데려온 값을 넣어주게 된다.
속성값이 출력되지 않았다. 흠....
에러 수정
임포트에 문제가 있단다.
문제의 원인은 export default CustomerProfile; 이라고 나온다.
export default CustomerProfile; 이 보인다.
export default CustomerProfile; 삭제
제대로 출력되었다.
Component.js
지금까지의 코드
import React from ' react ';
class Customer extends React . Component {
render () {
return (
< div >
< CustomerProfile
id ={this. props . id }
image ={this. props . image }
name ={this. props . name }
/>
< CustomerInfo
birthday ={this. props . birthday }
gender ={this. props . gender }
job ={this. props . job }
/>
</ div >
) ;
}
}
class CustomerProfile extends React . Component {
render () {
return (
< div >
< img src ={this. props . image } alt = " profile " />
< h2 >{ this. props . name } ( { this. props . id } ) </ h2 >
</ div >
) ;
}
}
class CustomerInfo extends React . Component {
render () {
return (
< div >
< p > Birthday: { this. props . birthday }</ p >
< p > Gender: { this. props . gender }</ p >
< p > Job: { this. props . job }</ p >
</ div >
) ;
}
}
export default Customer ;
데이터 갯수를 늘린다면?
<div></div> 테그로 감싸주지 않아서 생긴 에러
에러 제거
고객정보 출력확인함!
import React , { Component } from ' react ';
import Customer from ' ./components/Customer ';
import ' ./App.css ';
const customers = [ {
' id ' : 1 ,
' name ' : ' 나동빈 ' ,
' birthday ' : ' 961222 ' ,
' gender ' : ' 남자 ' ,
' job ' : ' 대학생 '
}, {
' id ' : 2 ,
' name ' : ' 홍길동 ' ,
' birthday ' : ' 900101 ' ,
' gender ' : ' 남자 ' ,
' job ' : ' 개발자 '
}, {
' id ' : 3 ,
' name ' : ' 이순신 ' ,
' birthday ' : ' 980303 ' ,
' gender ' : ' 남자 ' ,
' job ' : ' 디자이너 '
} ]
class App extends Component {
render () {
return (
< div >
< Customer
id ={ customers [ 0 ] . id }
image ={ customers [ 0 ] . image }
name ={ customers [ 0 ] . name }
birthday ={ customers [ 0 ] . birthday }
gender ={ customers [ 0 ] . gender }
job ={ customers [ 0 ] . job }
/>
< Customer
id ={ customers [ 1 ] . id }
image ={ customers [ 1 ] . image }
name ={ customers [ 1 ] . name }
birthday ={ customers [ 1 ] . birthday }
gender ={ customers [ 1 ] . gender }
job ={ customers [ 1 ] . job }
/>
< Customer
id ={ customers [ 2 ] . id }
image ={ customers [ 2 ] . image }
name ={ customers [ 2 ] . name }
birthday ={ customers [ 2 ] . birthday }
gender ={ customers [ 2 ] . gender }
job ={ customers [ 2 ] . job }
/>
</ div >
) ;
}
}
export default App ;
Map함수 사용하여 소스코드 길이를 줄여보자
주의사항: 키값을 넣어줘야 한다.
키값을 넣어줘야한다.
리턴을 받아주는 ) 에 ; 이 빠져 있어서 추가. 이것이 빠져 있어도 에러가 발생하지 않넴.... 흠 암튼 수정함.
깃헙에 커밋하기
플러스 누른 후
간단한 커밋메세지 넣어주고 커밋클릭
메세지창 옆에 있는 삼선누르고 푸쉬. 이전에 푸쉬했었기에 터미널창에 칠것은 더 없다.
깃헙에 업로드 되었다.
