React Project4. 상품목록 Component화 + 반복문

터미널창에 뜨는 warning 왜자꾸 뜨는거야?

이미지에 alt=”” 넣어주세요”
“변수 선언만하고 안쓰셨어요”
이런 잔소리가 귀찮다면
페이지 맨 위에 /eslint-disable/ 이라는 코드를 추가합니다.

function App(){
  return (
    <div className="App">
      <div className="container">
        <div className="row">
          <div className="col-md-4">
            <img src="https://codingapple1.github.io/shop/shoes1.jpg" width="100%" />
            <h4>{ shoes[0].title }</h4>
            <p>{ shoes[0].content } & { shoes[0].price }</p>
          </div>
          <div className="col-md-4">
            <img src="https://codingapple1.github.io/shop/shoes2.jpg" width="100%" />
            <h4>상품명</h4>
            <p>상품정보</p>
          </div>
          <div className="col-md-4">
            <img src="https://codingapple1.github.io/shop/shoes3.jpg" width="100%" />
            <h4>상품명</h4>
            <p>상품정보</p>
          </div>
        </div>
      </div>
    </div>
  )
}

위의 코드를 컴포넌트화 시키고 중복되는 것들을 반복문을 돌려서 리팩토링 해본다면?

중괄호를 열어서 반복문 돌린다

function App(){
  let [shoes, shoes변경] = useState(Data);
  return (
    <div className="App">
    	<div className="row">
     	 <div className="container">
          { //중괄호를 열어서 반복문 돌린다
    // 2번째 파라미터인 i로 참 많은걸 할 수 있다.
              shoes.map( (a, i) => {
                return (
                  <Card shoes={shoes[i]} key={i}/>	
                )
              }
          }
      	</div>
      </div>
    </div>
  )
}

function Card(props) {
	return (
      <div className="col-md-4">
        <img src="https://codingapple1.github.io/shop/shoes3.jpg" width="100%" />
        <h4> {props.shoes.title} </h4>
        <p> {props.shoes.content} & {props.shoes.price} </p>
	  </div>
    )
}

상위컴포넌트로부터 값을 가져오기 위해선 2가지 스텝이 필요하다.

1. 상위컴포넌트 안에 들어있는 하위컴포넌트에 연결 링크를 걸어줘야함 : state명={state명}
2. 하위컴포넌트에 인자로 props를 넣어주고 그 안에서 props. 써주고 연결링크 변수사용

<img src="https://codingapple1.github.io/shop/shoes3.jpg" width="100%" />

shoes3에서 숫자부분을 정수를 차례대로 불러오고 싶다면?

태그 안에 변수가져올때 특징)
src={"텍스트"+변수+"텍스트"}

<img
src={"https://codingapple1.github.io/shop/shoes"+ (props.i+1) +".jpg"} alt="" width=100% />

• 부모가 가지고 있는 state, 변수 이런건 props로 전송해야 쓸수 있음

// 서버에서 필요한 데이터를 받아온 후 HTML로 보여주는게 프론트엔드 개발자의 역할