Usually, you will pass information from a parent component to a child component via props. But passing props can become verbose and inconvenient if you have to pass them through many components in the middle
- React Official Document -
Props drilling
•
기본적으로 props drilling을 해결하기 위함. → In most of situations, I personally think reorganizing components can solve props drilling. Before you pass props through multiple components, you should think about your components first.
•
React document describes “Conetext” as a teleport.
•
Context follows the value of nearest Context.Provider
•
CSS Property inheritance와 비슷하다. → <div>에 color:blue를 설정할 경우 중간에 다른 HTML Element가 color:green으로 overrride 하지않는 이상 모든 HTML Element들은 color:blue 속성을 가진다.
Before you use context
•
컨텍스트는 여차하면 “아그냥 사용할까?”와 같은 생각을 하게끔 만든다. 잘못하면 오남용하기 딱좋은 케이스.
◦
Props drilling이 몇번 발생한다고 무조건 해당 props를 context에 넣어야 하는건 아니다.
•
아래 두가지 프로세스 후에도 똑같은 문제가 남아있을 경우 Context 사용을 고려한다.
◦
시작은 무조건 passing props로 시작하자 → 어디에 어떤 데이터가 사용되는지 알기 쉽기 때문이다. 정확히 어디에 어떤 데이터가 사용되는지 알기 쉬우므로 The person maintaining your code will be gald, 더 명시적으로 data flow를 만들었기 때문.
◦
<Layout posts ={posts}/>와 같이 하지말고 <Layout><Posts posts={posts}/></Layout>과 같은 방식으로 컴포넌트 레벨을 줄여야한다.