📒 오늘의 숙제
- 오늘 만든 상품목록을 컴포넌트로 만들기
- 컴포넌트를 만든 후 데이터바인딩 하기
- 반복적인 html이나 컴포넌트를 발견하면 연습삼아 map 반복문 사용해보기
🤍 1번숙제
- 지난시간에 배운 컴포넌트 만들기를 다시 찾아서 활용해보았다.
- 많은 div들을 한 단어로 줄일 때 우리는 Component를 사용한다고 배웠다.
- 줄이는 방법을 복습해보았다.
- function을 이용해 함수 하나를 만들고 작명을 해준다.
- 함수 안에 return() 을 적고 괄호에 축약을 원하는 HTML 을 담아준다.
- 원하는 곳에서 <함수명><함수명/> 을 사용하면 된다.
- Shoes라는 함수를 작명해주었다.
<Container>
<Row>
<Col sm>
<Shoes shoes={shoes}></Shoes>
</Col>
<Col sm>
<img src="https://codingapple1.github.io/shop/shoes2.jpg" width="80%"></img>
<h4>{shoes[1].title}</h4>
<p>{shoes[1].price}</p>
</Col>
<Col sm>
<img src="https://codingapple1.github.io/shop/shoes3.jpg" width="80%"></img>
<h4>{shoes[2].title}</h4>
<p>{shoes[2].price}</p>
</Col>
</Row>
</Container>
function Shoes(props){
return(
<div> // 하나의 태그로 감싸기 위한 태그
<img src="https://codingapple1.github.io/shop/shoes1.jpg" width="80%"></img>
<h4>{props.shoes[0].title}</h4>
<p>{props.shoes[0].price}</p>
</div>
)
}- 처음엔 감싸는
<div>없이 적었더니 오류가 발생했었다. - return() 안에는 하나의 태그만 들어갈 수 있다고 했기 때문에
<div>태그로 감싸주었더니 해결됐다.
🤍 2번숙제
- props 없이 shoes[0].title 을 적으면 컴퓨터가 인식하지 못한다 ( 상위 함수에 있는 state이기 때문이다.)
- props를 사용해 shoes state를 가져오고 원하는 위치에
<Shoes/>를 적어주었다. - 오류를 해결하려고 하니 자연스럽게 2번숙제도 완료했다! ㅎㅎ
🤍 3번숙제
- 신발 3개를 나타내기 위한 component 가 3개 있어야한다.
- 하지만 반복적으로 나타나기 때문에 map 반복문을 사용하여 코드를 간단하게 만들 수 있다.
{/* <Col sm>
<Shoes shoes={shoes}></Shoes>
</Col>
<Col sm>
<img src="https://codingapple1.github.io/shop/shoes2.jpg" width="80%"></img>
<h4>{shoes[1].title}</h4>
<p>{shoes[1].price}</p>
</Col>
<Col sm>
<img src="https://codingapple1.github.io/shop/shoes3.jpg" width="80%"></img>
<h4>{shoes[2].title}</h4>
<p>{shoes[2].price}</p>
</Col> */}- 우선 완성했던
<Col>태그를 주석처리 후 아래에 map 함수를 사용해 다시 만들어 줄 것이다.
<Row>
{
shoes.map(function(a,i){
return(
<div className="list" key={i}>
<Col sm>
<img></img>
<h4></h4>
<p></p>
</Col>
</div>
)
})
}
</Row>- 처음부터 복잡하게 생각하지 않기 위해 지난 시간에 배운 map 함수를 활용하여 큰 틀을 먼저 잡아주었다.
- 첫번째 파라미터 a는 array 안에 있는 자료이고 두번째 파라미터 i 는 0부터 1씩 증가하는 정수이다.
- map으로 반복생성한 html엔 key={i} 라는 속성을 추가해줘야 리액트가
<div>들을 각각 구분할 수 있다.
<Row>
{
shoes.map(function(a,i){
return(
<div className="list" key={i}>
<Col>
<img src="https://codingapple1.github.io/shop/shoes2.jpg" width="80%"></img>
<h4>{shoes[i].title}</h4>
<p>{shoes[i].price}</p>
</Col>
</div>
)
})
}
</Row>- component에서 만들었던 html을 넣어주었다.
- shoes 배열 index는 i로 바꿨다.
- 이미지 경로를 주는 방법을 백틱을 사용해보았으나 작동이 되지 않았다.
"https://codingapple1.github.io/shop/shoes${i}.jpg"
💡 이미지 경로 해결법
<img src={'https://codingapple1.github.io/shop/shoes' + props.i + '.jpg'} width="80%" />- 문자 중간에 변수를 넣고 싶으면 '문자' + 변수 + '문자' 이렇게 하면 된다!
(data.js)
let data =
[
{
image : "https://codingapple1.github.io/shop/shoes1.jpg",
id : 0,
title : "White and Black",
content : "Born in France",
price : 120000
},
{
image : "https://codingapple1.github.io/shop/shoes2.jpg",
id : 1,
title : "Red Knit",
content : "Born in Seoul",
price : 110000
},
{
image : "https://codingapple1.github.io/shop/shoes3.jpg",
id : 2,
title : "Grey Yordan",
content : "Born in the States",
price : 130000
}
]
export default data;- 사진도 3개가 다르게 나오고 이름, 가격 각각 배열대로 잘 나왔지만 사진이 세로로밖에 나열이 되지 않았다.🤔
- 처음에는 주소를 배열로 선언하면 같은 태그 내에서 width 가 작동되지 않는 것인줄 알고 className을 부여하여 css에서 width 를 주었다.
- 하지만 역시 작동되지 않아 width에는 문제가 없음을 파악했다.
- 그래서 React-Bootstrap을 찾아보기 시작했다.
React-Bootstrap Gird 정리 - Col을 아무리 건드려봐도 바뀌지 않아 Row 를 건드려봤더니 바로 3열이 생겼다.
<Row md={3}>
{
shoes.map(function(a,i){
return(
<div className="list" key={i}>
<Col>
<img src={shoes[i].image} width="80%"></img>
<h4>{shoes[i].title}</h4>
<p>{shoes[i].price}</p>
</Col>
</div>
)
})
}
</Row>- 지금 정리를 하던 중 왜 Row md={3} 만 작동이 됐을까 알아보던 중 반복문이
<Col>태그만 반복되는 것이 아니라<div>까지 반복되는 것을 발견했다!!! - 그래서 Col 을 아무리 건드려도 바뀌지 않고 Row 에 변화를 주었을 때 작동이 잘 됐던 것이다..!💡
- 혼자서 숙제를 다 한 경험은 처음이라 뭔가 뿌듯하고 벅찬 감정이 든다 🥲🥲
💻