특정한 상태 로직 (state logic) 조각을 찾고 있었는데, 대신 더 흥미로운 것을 발견하게 되었습니다.

동일한 프로젝트 내의 네 가지 컴포넌트가 자식 컴포넌트를 통해 데이터를 아래로 전달하고 있었습니다. 모든 경우에 근본적인 문제는 동일했습니다. 상태 (state) 조각이 발생한 지점보다 여러 단계 아래에서 필요했던 것입니다. 모든 React 개발자가 언젠가는 마주하게 되는 전형적인 Prop Drilling (프롭 드릴링) 문제였습니다.

제 주의를 끌었던 점은 네 가지 사례가 각각 다르게 문제를 해결했다는 것입니다. 하나는 React Context (리액트 컨텍스트)를 사용했습니다. 하나는 데이터를 props로 전달하는 대신 컴포넌트를 자식 (children)으로 전달하는 Composition pattern (합성 패턴)을 사용했습니다. 하나는 문제를 전혀 해결하지 않고 단순히 네 단계 아래로 props를 계속 전달했습니다. 하나는 프로젝트의 다른 어디에서도 사용되지 않는 작은 상태 관리 라이브러리 (state management library)를 도입했습니다.

네 가지의 서로 다른 솔루션. 동일한 문제. 동일한 코드베이스. 그들 사이에는 어떠한 일관성도 없었습니다.

네 가지 솔루션 중 정확히 틀린 것은 없었습니다. Context는 Prop Drilling에 대한 정당한 해답입니다. Composition도 마찬가지입니다. 적절한 상황에서의 상태 라이브러리 사용도 그렇습니다. 전달 체인이 짧을 때는 단순히 여러 단계를 통해 props를 전달하는 것도 방어 가능합니다. 하지만 각 방식이 언제 적용되어야 하는지에 대한 표시 없이 한 프로젝트에 네 가지 접근 방식이 흩어져 있는 것은 기술적인 문제가 아닙니다. 그것은 표준적인 문제입니다.

왜 이 특정 패턴이 많은 것을 드러내는가

Prop Drilling은 AI가 어떻게 아키텍처 결정을 내리는지 이해하기 위한 좋은 렌즈입니다. 왜냐하면 이 문제에는 단 하나의 정답이 없기 때문입니다. 명확한 옳고 그름이 있는 것과 달리, Prop Drilling에는 여러 가지 정당한 솔루션이 있으며, 올바른 선택은 React에 보편적인 것이 아니라 귀하의 프로젝트에 특화된 컨텍스트 (context)에 따라 달라집니다.

Context (컨텍스트)는 데이터가 하위 트리(subtree) 전체에 진정으로 전역적이고, 변경 빈도가 낮으며, 세밀한 업데이트 제어 (fine grained update control)가 필요하지 않을 때 좋은 솔루션입니다. Composition (합성)은 중간에 있는 컴포넌트들이 데이터 자체를 실제로 필요로 하지 않고, 단지 구조적으로 길을 막고 있을 때 좋은 솔루션입니다. 전용 상태 관리 (state management) 접근 방식은 상태가 복잡한 업데이트 로직을 가지고 있거나 트리의 서로 관련 없는 많은 부분에서 접근해야 할 때 타당합니다. 그리고 때로는 단순히 2~3단계의 Props (프롭스)를 전달하는 것만으로도 정말 괜찮으며, 전혀 더 정교한 솔루션이 필요하지 않을 수도 있습니다.

이 네 가지 모두 적절한 상황에서는 정답입니다. AI는 이 네 가지 패턴이 존재한다는 것과 각각이 대략 언제 사용되는지를 알 수 있을 만큼 충분한 React 코드로 학습되었습니다. 하지만 AI에게는 귀하의 프로젝트가 어떤 것을 선호하는지, 혹은 어느 임계값(threshold)을 넘어야 Prop Drilling (프롭 드릴링)이 더 이상 괜찮지 않고 다른 패턴이 필요해지는지에 대한 귀하의 프로젝트 전용 규칙은 없습니다.

그러한 규칙이 없다면, 매 세션은 독립적인 판단을 내리게 됩니다. 그리고 그 판단은 미묘한 컨텍스트 (context)에 달려 있기 때문에, 세션마다 결과가 달라지는 변동성 (variance)은 거의 확실하게 발생합니다.

네 번의 별도 세션 동안 실제로 일어나는 일

세션 1. 3단계 깊이에 있는 컴포넌트가 사용자 데이터의 일부를 필요로 합니다. 해당 세션에서 보이는 컨텍스트를 바탕으로 작업하는 AI는 여기서 Context (컨텍스트)가 타당하다고 결정합니다. AI는 관련 하위 트리를 Context Provider (컨텍스트 프로바이더)로 감싸고 3단계 아래에서 이를 소비 (consume)합니다.

세션 2, 몇 주 후, 다른 기능을 작업 중입니다. 4단계 깊이에 있는 다른 컴포넌트가 데이터의 일부를 필요로 합니다. 세션 1의 Context (컨텍스트) 솔루션은 현재 컨텍스트 창 (context window)에 보이지 않거나, AI가 이 상황을 이전 상황과 연결 짓지 못합니다. AI는 여기서 Composition (합성)이 더 깔끔하다고 결정하고, 데이터를 필요로 하는 컴포넌트가 대신 자식 프롭 (child prop)으로 콘텐츠를 받도록 컴포넌트 트리를 재구조화합니다.

세 번째 세션. 동일한 근본적 문제의 또 다른 사례입니다. 이번에는 컴포넌트 체인이 단 두 단계로 더 짧기 때문에, AI는 추가적인 패턴을 도입하지 않고 단순히 프롭 (prop)을 직접 전달합니다. 개별적으로 보면 합리적입니다.

네 번째 세션. 더 복잡한 사례로, 관련된 여러 상태 (state) 조각들이 깊게 중첩된 여러 컴포넌트에 도달해야 합니다. AI는 프로젝트의 다른 부분에서 해당 방식을 사용하지 않음에도 불구하고, 복잡도가 이를 정당화한다고 판단하여 작은 상태 관리 (state management) 솔루션을 선택합니다.

이 각각을 개별적으로 살펴보면 모든 결정이 국소적으로 합리적입니다. AI는 혼란을 겪거나 실수를 하고 있는 것이 아닙니다. AI는 이전의 세 가지 상황이 어떻게 처리되었는지에 대한 인식 없이, 마주치는 각 구체적인 상황에 자신의 일반적인 React 지식을 적용하고 있을 뿐입니다.

문제는 네 가지를 모두 함께 볼 때만 드러나며, 이는 개별 세션에서는 결코 가질 수 없는 종류의 가시성입니다.

왜 더 많은 컨텍스트가 이 특정 문제를 해결하지 못하는가

이것은 컨텍스트 (context)와 규칙 (rules)의 구분이 매우 구체화되는 사례입니다. 코드베이스에 대한 완전한 접근 권한이 있더라도, 더 많은 컨텍스트가 프롭 드릴링 (prop drilling)의 불일치를 해결하지는 못합니다. 왜냐하면 코드베이스 자체에 이미 네 가지의 서로 다른 정답이 포함되어 있기 때문입니다.

만약 AI가 이 패턴의 다섯 번째 사례를 마주했을 때 기존의 네 가지 솔루션에 모두 접근할 수 있다면, AI는 어떤 것을 따라야 할지에 대한 명확한 신호를 얻지 못합니다. AI는 네 가지 서로 다른 접근 방식을 보여주는 네 가지 예시를 갖게 됩니다. 이들을 평균 내거나 현재 상황과 가장 유사해 보이는 것을 선택하는 방식은 일관성을 만들어내지 못합니다. 대신 다섯 번째 변형을 만들어내거나, 기껏해야 이미 존재하는 네 가지 중 하나를 동전 던지기 식으로 선택하게 될 뿐입니다.

이는 컨텍스트 (Context)가 진정으로 도움이 되는 상황과는 다릅니다. 예를 들어, 기존 코드베이스가 대부분 하나의 일관된 패턴을 보여주는 명명 규칙 (Naming conventions)의 경우, AI는 이를 합리적으로 추론하고 따를 수 있습니다. 하지만 이 프로젝트의 Prop drilling (Prop drilling)에는 추론할 만한 일관된 패턴이 없었습니다. 그 불일치 자체가 컨텍스트가 문제를 해결할 수 없게 만드는 원인이었습니다.

오직 명시적인 규칙만이 이러한 교착 상태를 깨뜨릴 수 있습니다. 기존 코드가 무엇을 보여주든 상관없이, 이것이 임계값이며 그 임계값 이상의 패턴은 이것이라고 명시하는 무언가가 필요합니다.

이 특정 문제에 대한 실제 규칙의 모습

규칙이 네 가지 접근 방식 중 세 가지를 완전히 금지할 필요는 없습니다. 규칙은 각 방식이 언제 적용되는지를 정의해야 하며, 그래야만 결정이 매 세션마다 새로운 판단 (Judgment call)이 되는 것을 멈출 수 있습니다.

다음은 Prop drilling에 특화하여 모호함을 해결하는 규칙입니다:

Prop drilling 해결 규칙:
1. 한두 단계(level)를 거쳐 전달되는 Props는 추가적인 패턴 없이 허용됩니다. 이렇게 짧은 체인에는 Context나 합성 (Composition)을 도입하지 마십시오.
2. 세 단계 이상의 중간 컴포넌트가 데이터를 직접 사용하지 않고 Props를 전달하는 경우, 합성을 사용하여 구조를 재조정하십시오. 데이터를 Props로 전달하는 대신, 깊게 중첩된 콘텐츠를 자식 (children)으로 전달하십시오.
...

네 가지 상황에 대해 네 가지 명확한 답변이 나옵니다. 이는 네 가지 정당한 패턴 중 세 가지가 틀렸기 때문이 아니라, 규칙이 이 프로젝트에서 각 패턴이 정확히 언제 적절한지를 명시하기 때문입니다. AI는 더 이상 국소적으로 합리적으로 보이는 것에 기반하여 선택하지 않습니다. 대신 규칙을 확인하고 이미 결정된 답변을 적용합니다.

Prop drilling을 넘어 이 패턴이 드러내는 것

Prop drilling은 컨텍스트에 따라 달라지는 몇 가지 진정으로 올바른 답변을 가지고 있기 때문에 깔끔한 예시가 됩니다. 하지만 동일한 역학 관계는 하나 이상의 정당한 솔루션이 존재하는 모든 React 결정 사항에도 적용됩니다.

조건부 렌더링 (Conditional rendering)에는 여러 가지 유효한 접근 방식이 있습니다. 삼항 연산자 (Ternary expressions), 단락 평가 (Short-circuit evaluation), 조기 반환 (Early returns), 별도의 컴포넌트 변형 (Separate component variants) 등이 있습니다. 이들은 모두 서로 다른 상황에서 올바른 방법입니다. 각 방식이 언제 적용되어야 하는지를 명시하는 규칙이 없다면, Prop Drilling 사례에서 보여준 것과 같이 세션마다 결과가 달라지는 변동성을 예상해야 합니다.

데이터 페칭 (Data fetching) 패턴 또한 초기 렌더링 시 데이터가 필요한지, 캐싱 (Caching)이 필요한지, 재검증 (Revalidation)이 필요한지, 혹은 사용자의 상호작용에 반응하여 가져와야 하는지에 따라 여러 가지 유효한 접근 방식이 존재합니다. 규칙이 없다면, 각 특정 세션에서 합리적으로 보이는 것에 따라 서로 다른 패턴이 선택될 것입니다.

폼 핸들링 (Form handling) 역시 완전히 제어되는 컴포넌트 (Controlled components)부터 제어되지 않는 Ref (Uncontrolled refs), 그리고 제3자 폼 라이브러리 (Third party form libraries)에 이르기까지 여러 가지 유효한 접근 방식이 있습니다. 앞서 말한 것과 같은 상황입니다.

교과서적으로 정답이 하나 이상 존재하는 모든 React 관련 결정 사항은, 여러분의 특정 프로젝트에서 어떤 조건 하에 어떤 답을 적용해야 하는지 명시하는 규칙이 없다면 결국 표류하게 될 결정입니다. 이는 대부분의 개발자가 규칙을 처음 작성하기 시작할 때 깨닫는 것보다 더 넓은 범주입니다. 왜냐하면 본능적으로는 명백히 틀린 것들에 대해 규칙을 작성하려 하기 때문입니다. 실제로 가장 가치가 높은 규칙은 틀린 것이 아니라 단지 일관성이 없는 것들에 대한 규칙인 경우가 많습니다. 왜냐하면 바로 그런 결정들이 AI가 여러 개의 정답을 가지고 있으며, 여러분이 어떤 것을 원하는지 알 방법이 없는 지점이기 때문입니다.

규칙을 작성한 후 무엇이 변했는가

Prop Drilling 규칙이 적용된 이후의 세션들을 다시 살펴보니, 패턴이 눈에 띄게 달라졌습니다. 동일한 근본 문제를 가진 새로운 사례들이 특정 세션에서 합리적으로 보이는 방식이 아니라, 규칙에 정의된 임계값 (Threshold)을 바탕으로 일관되게 동일한 방식으로 해결되었습니다.

더 중요한 점은, 해당 결정에 더 이상 능동적인 검토(Active review)가 필요하지 않게 되었다는 것입니다. 규칙이 존재하기 전에는, Prop drilling (Prop drilling)이 발생하는 모든 새로운 사례마다 코드 리뷰 과정에서 평가의 순간이 필요했습니다. 이 특정 솔루션이 타당한지, 아니면 코드베이스의 나머지 부분에서 수행하는 방식에 비추어 다르게 처리되었어야 하는지를 확인해야 했습니다. 규칙이 도입된 후에는, 리뷰 과정에서 단순히 정의된 임계값 (Threshold)을 준수하는지만 확인하면 되었습니다. 이는 아키텍처 측면의 판단 (Architectural judgment call)이 합리적인지를 평가하는 것보다 훨씬 빠르고 기계적인 확인 방식입니다.

기존에 존재하던 불일치 사례 네 건이 스스로 수정되지는 않았습니다. 규칙은 소급 적용되는 것이 아니라 향후 적용되기 때문입니다. 하지만 그 이후로 불일치 사례가 새로 발생하지 않았으며, 이것이 바로 실제 목표입니다. 이미 누적된 사례를 즉시 수정하는 것보다 새로운 드리프트 (Drift) 사례가 발생하는 것을 방지하는 것이 더 중요합니다. 이미 누적된 사례는 알려진 범위 내의 비용인 반면, 지속적인 드리프트는 제한이 없는 비용이기 때문입니다.

프롬프트는 중요하지 않습니다. 규칙이 중요합니다.

Prop drilling (Prop drilling)은 어려운 문제가 아닙니다. React 개발자들은 수년 동안 이를 해결하는 방법을 알고 있었으며, AI 또한 숙련된 개발자만큼이나 모든 표준 솔루션을 알고 있습니다.

불일치가 발생하는 이유는 AI가 Prop drilling을 해결하는 지식이 부족해서가 아닙니다. AI가 여러 개의 올바른 선택지를 가지고 있음에도, 어떤 상황에서 어떤 것을 적용해야 하는지에 대한 프로젝트 특화 규칙 (Project-specific rule)이 없기 때문입니다. 이러한 간극은 Prop drilling뿐만 아니라, 하나 이상의 정당한 답이 존재하는 모든 다른 React 결정 사항에서도 존재합니다.

프로젝트 내에서 하나 이상의 정답이 존재하는 결정 사항들을 찾아내십시오. 어떤 조건에서 어떤 솔루션이 적용되어야 하는지 기록하십시오. 그리고 각 세션이 세 번 전의 세션에서 내린 결정과 다른, 독립적이고 국지적으로만 합리적인 선택을 내리도록 방치하지 마십시오.

귀하의 React 프로젝트에서 동일한 작업을 서로 다른 방식으로 수행하는 여러 유효한 패턴이 어디에 있는지 찾고 싶으신가요?

저는 바로 그 문제를 정확히 식별할 수 있도록 도와주는 24가지 항목의 무료 체크리스트를 만들었습니다. 하나 이상의 정답이 존재하지만, 귀하의 프로젝트가 실제로 어떤 방식을 사용하는지 명시하는 규칙이 없는 구조적 격차(structural gaps)를 찾아낼 수 있습니다.

→ React AI Clean Code Checklist 받기 — 무료

→ Avery Code React AI Engineering System