상세 컨텐츠

본문 제목

082024 til react prop drilling

TIL

by wangmandoo1 2024. 8. 20. 18:34

본문

 


프롭 드릴링 이란 ?


장난감 이 있다 .

그런데 그 장난감을 네 동생에게 주고 싶다

 그런데 직접 주는 대신, 먼저 형(누나)에게 건네고,

형(누나)이 그 장난감을 동생에게 전달해준다 

. 이렇게 중간에 한 번 더 거쳐서 전달하는 걸 "프롭 드릴링"이라고 한다 

ex ) 
- **나 **: 장난감을 가지고 있다
- **형(누나)**: 네가 장난감을 형(누나)에게 줘
- **동생**: 형(누나)이 다시 장난감을 동생에게 줘.

장난감이 동생에게 가기 위해,

형(누나)을 거쳐서 간다 . 

형(누나)가 장난감을 사용하지는 않지만,

동생에게 주기 위해 받아서 다시 건네주는거다 

프롭 드릴링은 이렇게 중간에 있는 사람이 장난감을 전달해주는 것처럼,

컴퓨터 프로그램에서도 중간에 있는 부분들이 데이터를 전달하는 거다 

 

 

나의 장난감이 전달 전달 전달 되에서 

원하는곳에 건네 주는것 . 



 사과를 동생에게 주기 위해 엄마와 아빠를 거쳐서 사과를 전달

엄마와 아빠는 사과를 먹지 않지만,

동생에게 전달하기 위해 사과를 받아서 다시 건네주는 역할을 함 

 

프롭 드릴링도 같은 개념이다

프로그램에서 데이터를 직접 주는 대신,

중간에 있는 여러 부분을 거쳐서 전달하는 거야.

엄마와 아빠가 사과를 주고받은 것처럼 동일하게 

 

컴포넌트 구조

  • 부모 컴포넌트 (Parent)
    • 자식 컴포넌트 A (Child A)
      • 자식 컴포넌트 B (Child B)
        • 자식 컴포넌트 C (Child C)

이런식으로 되있다 . 

 

 

부모 컴포넌트
   |
   |---> 자식 컴포넌트 A
                |
                |---> 자식 컴포넌트 B
                             |
                             |---> 자식 컴포넌트 C

 

 

 

그림으로 보니까 알아듣기 쉽게 잘 이해가 됬다 . 

'TIL' 카테고리의 다른 글

082124 til  (0) 2024.08.21
082124 til styled components  (0) 2024.08.21
081924 til  (0) 2024.08.19
081624 til  (0) 2024.08.16
081424 til  (0) 2024.08.15

관련글 더보기