React - Props

 

 

 

 

props 가 잘 적용 됬는지 확인하기 위해서 console.log 를 찍어주고 브라우저에가서

 개발자도구 열어보기 !

console 창을 보면 Object에 motherName : " 홍부인 " 이 제대로 들어와있는 것을 확인할수있다.

 

👇

 

 props 를 통해 부모 -> 자식 데이터 가 전달됬다.

 

 

---

 

실습 :  GrandFather 컴포넌트에서 Child 컴포넌트로 데이터 주기

1 ) 할아버지 이름을 Mother 컴포넌트로 전달

2 ) Mother 컴포넌트에서 다시 Child 컴포넌트로 전달

3 )  나는 누구누구 의 손자에요 가 최종으로 출력 되도록.

 

 

브라우저 출력결과

 

 

 

 

Prop drilling

 

 [부모] → [자식] 컴포넌트간 데이터 전달이 이루어지는 방법이 props

 

 [부모] → [자식] → [그 자식] → [그 자식의 자식]  이 데이터를 받기 위해선 무려 3번이나 데이터를 내려줘야 함.

이걸 바로 prop drilling ( props가 아래로 뚫고 내려간다 ).  라고 한다.

 

 

prop drilling 예시

쓸데없이 3번이나 내리게 됨.