컴포넌트의 props drilling depth는 어디까지 허용하는가?

[BoBeenLee]

개발자 기준에 따라 다르겠지만 내 기준은 depth 2까지는 허용가능한 범위라 생각한다.

• ex) todo리스트 전달, TodoPage -> TodoSection -> Todos

Solution 1

만일 depth 2 초과되었을 경우엔 컴포넌트 전달방식(children, label, caption)으로 처리하여 depth를 줄여 리팩토링한다.

<TodoSection>
   <Todos todos={todos} />
</TodoSection>

props 속성으로 컴포넌트를 전달한다.

<Input label={<Label />} value={...} />

이와 같이 했을 경우 페이지 내에서 todos를 전달할 수 있어 depth가 1이 될 수 있다.

[BoBeenLee]

Solution 2

• Compound Component

<TodoSection>
   <Todo.Root>
       {todos.map(todo => {
            return <Todo.Item key={todo.id}>{todo.name}<Todo.Item>
       }}
   <Todo.Root>
</TodoSection>

[BoBeenLee]

https://wishket.tistory.com/12?category=1011356