React
함수형 컴포넌트 상태관리 객체처리
🕵️♀️ 함수형 컴포넌트를 상태관리하고 객체처리 하는 방법을 알아보는 시간이다.
전체코드
(()=>{
const MemberComponent = (props) => {
return (
<div id="wrap">
<h1 style={style.h1}>{props.title}</h1>
<AddressComponent title2={props.title2} addr={props.addr}/>
</div>
);
};
const AddressComponent = (props) => {
const result=props.addr.map(function(item, index, array){
return(
<tr>
<td>{index+1}</td>
<td>{item.이름}</td>
<td>{item.거주지}</td>
<td>
{item.취미.map(function(item2,index2){
return(
<span>
<a href="#" title={item2}>{item2}</a>
{(item.취미.length-1)==index2? '':' , '}
</span>
);
})}
</td>
</tr>
);
})
return (
<div id="address">
<h2 style={style.h2}>{props.title2}</h2>
<table>
<thead>
<tr>
<th>번호</th>
<th>이름</th>
<th>거주지</th>
<th>취미</th>
</tr>
</thead>
<tbody>
{result}
</tbody>
</table>
</div>
);
};
const style={
h1:{
fontSize:'36px',
color:'#c66',
textAlign:'center',
padding:'50px 0'
},
h2:{
fontSize:'30px',
color:'#66c',
textAlign:'center',
padding:'30px 0'
}
}
MemberComponent.defaultProps={
title:'회원관리',
title2:'ADDRESS',
section1(){
return(
console.log('메서드 리턴값!!')
);
},
addr:[
{이름:'가ㅇㅇ',거주지:'화성',취미:['잠자기','먹기']},
{이름:'나ㅇㅇ',거주지:'평택',취미:['독서','영화보기']},
{이름:'다ㅇㅇ',거주지:'시흥',취미:['영화보기','맛집가기']},
{이름:'라ㅇㅇ',거주지:'시흥',취미:['등산','영화보기']},
{이름:'마ㅇㅇ',거주지:'화성',취미:['수영','독서','등산']},
{이름:'바ㅇㅇ',거주지:'오산',취미:['등산','맛집가기']},
{이름:'사ㅇㅇ',거주지:'종로',취미:['잠자기','음악']}
]
}
ReactDOM.render(
<MemberComponent/>,
document.getElementById('root')
)
})()👨💻전체 코드 구성은 위와 같고 하나하나 코드를 복습을 해나가면서 작성한다.
MemberComponent (최상위 컴포넌트)
(()=>{
const MemberComponent = (props) => {
return (
<div id="wrap">
<h1 style={style.h1}>{props.title}</h1>
<AddressComponent title2={props.title2} addr={props.addr}/>
</div>
);
};MemberComponent가 최상위 컴포넌트이다. 최상위 컴포넌트가 index.html에 #root에 들어가게 된다.
제일 하단에 코드를 보면 알 수 있다.
ReactDOM.render(
<MemberComponent/>,
document.getElementById('root')
)MemberComponent에는 props를 넣어주는데 props의 값은 하단에 MemberComponent.defaultProps에 있다.
MemberComponent.defaultProps={ title:'회원관리', title2:'ADDRESS', section1(){ return( console.log('메서드 리턴값!!') ); }, addr:[ {이름:'가ㅇㅇ',거주지:'화성',취미:['잠자기','먹기']}, {이름:'나ㅇㅇ',거주지:'평택',취미:['독서','영화보기']}, {이름:'다ㅇㅇ',거주지:'시흥',취미:['영화보기','맛집가기']}, {이름:'라ㅇㅇ',거주지:'시흥',취미:['등산','영화보기']}, {이름:'마ㅇㅇ',거주지:'화성',취미:['수영','독서','등산']}, {이름:'바ㅇㅇ',거주지:'오산',취미:['등산','맛집가기']}, {이름:'사ㅇㅇ',거주지:'종로',취미:['잠자기','음악']} ] }
위의 defaultProps 의 값으로 title과 AddressComponent 가 담겨있다.
AddressComponent
const AddressComponent = (props) => {
const result=props.addr.map(function(item, index, array){
return(
<tr>
<td>{index+1}</td>
<td>{item.이름}</td>
<td>{item.거주지}</td>
<td>
{item.취미.map(function(item2,index2){
return(
<span>
<a href="#" title={item2}>{item2}</a>
{(item.취미.length-1)==index2? '':' , '}
</span>
);
})}
</td>
</tr>
);
})
return (
<div id="address">
<h2 style={style.h2}>{props.title2}</h2>
<table>
<thead>
<tr>
<th>번호</th>
<th>이름</th>
<th>거주지</th>
<th>취미</th>
</tr>
</thead>
<tbody>
{result}
</tbody>
</table>
</div>
);
};최상위 컴포넌트에 들어간 AddressComponent 이다. 부모에게 props를 전달받았고 result라는 맵함수의 변수를 만든다.
const result=props.addr.map(function(item, index, array)
result 안에 props의 addr 값을 가져오고 map함수를 생성한다. (table에 반복문으로 들어와야한다.)
리턴문은 총 2개가 있다.
1번 return문
return문 안에 tr 안에 각 들어갈 index넘버 , 이름 , 거주지 , 취미가 들어갈 내용들의 틀을 만들어 준다.
return( <tr> <td>{index+1}</td> <td>{item.이름}</td> <td>{item.거주지}</td> <td> {item.취미.map(function(item2,index2){ return( <span> <a href="#" title={item2}>{item2}</a> {(item.취미.length-1)==index2? '':' , '} </span> ); })} </td> </tr> );👩🏫 [tip] : 여기서 취미는 하나가 아니므로 취미 안에서 맵함수를 한번 더 사용한다.
하나취미가 하나 이상일 경우 중간에,가 들어가야한다. 그래서 삼항연산자를 사용하여 조건문을 만들어 준다.
{(item.취미.length-1)==index2? '':' , '}
우리는 취미가 ( 잠자기 , 먹기 ) 잠자기 다음에,가 입력되어야 하기 때문에 조건문이 취미의 length-1 이다. index2는 반복문으로 0 , 1 의 값이 계속 돌아가고 있고 취미의 length-1값은 1 , 2 , 1 의 값이 돌아가므로 반복문이 돌아가고 조건문이 맞을 때 까지 마지막 전의 취미값에,가 찍힌다.
2번 return문
return문 안에 table을 만들고 thead , tbody가 들어간다.
return ( <div id="address"> <h2 style={style.h2}>{props.title2}</h2> <table> <thead> <tr> <th>번호</th> <th>이름</th> <th>거주지</th> <th>취미</th> </tr> </thead> <tbody> {result} </tbody> </table> </div> ); };
thead에는 각th들이 들어간다. 번호 , 이름 , 거주지 ,취미
tbody에는 위에 만들어 놓은반복문의 변수result맵함수가 들어오게 된다.
그게 1번 return문이 안에 들어오게 된다.
