React Callback Function - (컴포넌트 통신)

부모컴포넌트에서 함수를 만들고 하위컴포넌트의 props 로 넣어준다 .
하위컴포넌트에서 부모컴포넌트의 함수를 호출한다.

컴포넌트의 구조 (예시)

Contacts.jsx 에서 콜백함수(A)를 만들었다고  가정해보자,

A함수는 제일 하위 컴포넌트인 ContactCard.jsx 에서 호출이 되어야 한다고 가정해보자,

 

props로 ContactList로 A함수 를 넣어줬다.

다시 ContactCard 의 props 로 A함수를 넣어줬다.
A함수를 ContactCard 에서 호출하면 A함수는
ContactCard -> ContactList -> Contacts 의 순서를 거치게 된다.

 

하지만 컴포넌트의 양이 많아진다면 !? 🤔 props 와 callback 지옥에 빠지게 될 것이다..

 

상태관리를 하면 해결이 된다 추후에 다뤄볼 예정이다.