react - props

이 친구는 자식 Component에서 부모 Component의 State를 가져다 쓰고 싶을 때 쓰는 친구다.

App은 부모 Component   Card는 자식 Component

Card Component 에서 App Component에 있는 items 라는 State를 쓰고 싶은 상황이다

요로코럼 하면 된다.

---

1번

자식 Component에 사용하는 곳에 작명+{state명 or 변수명} 형식을 추가해 준다.

array에 사용할 수 있는 메소드인 map함수를 사용한것 

위에 사진에서 items={a} , i={ i } 처럼 작명+{state명 or 변수명} 형식을 추가해 준다.

---

2번

자식 Component를 만든곳에 원하는 파라미터를 (보통 props를 씀) 입력하고

기존 사용하려던 state명 or 변수명 앞에 '파라미터.'를 붙여준다.

요로코럼 1,2번 처럼 쓰면 무슨 뜻이냐 하면~

 

props.items 자리에 items.map에서 만들어진 a를 넣어주세요 ~

( a는 map함수에서 array에 들어있는 하나하나의 데이터를 의미) 

 

props.i 자리에 items.map에서 만들어진 i를 넣어주세요~

( i는 map함수에서 0 부터 시작하는 정수를 의미 --> array에 들어있는 데이터 개수만큼)

 

라는 말이 된다.

 

그리하여 map 함수로 인해 반복생성된 Card Component 하나하나에

i+1 의 이름을 가진 해당하는 img 와

a.title , a.price 의 데이터가 표현 된다.

 

끄으으읏