react 개발자라면 누구나 한 번쯤 "재사용 가능하면서도 유연한 컴포넌트"를 만드는 것에 대해 깊이 고민해 볼것이다. 처음에는 간단했던 컴포넌트가 기능이 추가될수록 수많은 props를 받기 시작하고, 어느새 통제 불가능한 '괴물' 컴포넌트가 되어버리는 경험이 다들 있을것 같다
이러한 문제를 나름대로 정의해봤는데 **'Props Hell'**이라고 결정했다.
그렇다면 어떻게 Props Hell에서 벗어나, 깨끗하고 유연하며 선언적인 컴포넌트를 만들수 있을까?
<aside> 💡
가장 흔히 만드는 UI 중 하나인 Select 컴포넌트를 재료 삼아, 원시적인 단일 컴포넌트(Monolithic Component)에서 시작해 최종적으로 Compound Component Pattern과 Context API를 활용한 우아한 형태로 진화시키는 과정을 단계별로 밟아보려고 한다.
</aside>
우리가 '좋은 React 코드'를 이야기할 때 빠지지 않고 등장하는 단어가 바로 선언형 프로그래밍입니다. 본격적인 여정에 앞서 이 개념을 명확히 짚고 넘어가겠습니다.
선언형은 **명령형(Imperative)**과 반대되는 개념입니다.
명령형 (Imperative): "어떻게(How)"에 집중합니다.
목표를 달성하기 위한 절차를 하나하나 명시하는 방식입니다.
비유: 친구에게 집을 찾아오는 길을 알려줄 때, "사거리에서 좌회전하고, 빵집을 끼고 우회전해서, 두 블록 직진해."라고 단계별로 지시하는 것과 같습니다.
코드 예시 (Vanilla JS):
// 1. p 태그를 만든다.
const p = document.createElement('p');
// 2. 텍스트를 넣는다.
p.textContent = "Hello, React!";
// 3. id를 추가한다.
p.id = "greeting";
// 4. body에 붙인다.
document.body.appendChild(p);
선언형 (Declarative): "무엇을(What)"에 집중합니다.
절차보다는 '원하는 결과물(상태)'이 어떤 모습인지를 선언(묘사)하는 방식입니다. '어떻게'에 대한 구체적인 방법은 시스템(라이브러리, 프레임워크)이 알아서 처리합니다.
비유: 친구에게 우리 집 '주소'를 알려주는 것과 같습니다. 친구는 GPS(시스템)를 이용해 최적의 경로를 '알아서' 찾아옵니다.
코드 예시 (React)
// "나는 이런 모습의 p 태그를 원해" 라고 선언한다.
const Greeting = () => <p id="greeting">Hello, React!</p>;
React에서 컴포넌트를 선언형으로 만든다는 것은, 개발자가 UI의 구조를 JSX로 직접 묘사하고, React가 그 선언을 바탕으로 실제 DOM을 효율적으로 조작하도록 위임하는 것을 의미합니다.
우리의 Select 컴포넌트 진화 여정은, 명령형에 가까운 '블랙박스' 컴포넌트를 사용자가 UI 구조를 직접 묘사하는 '선언형' 컴포넌트로 바꾸어 가는 과정입니다.
Select 컴포넌트입니다. 이 컴포넌트는 필요한 모든 데이터를 props로 전달받아 스스로 모든 것을 렌더링합니다. 매우 직관적이고 구현하기 쉽다는 장점이 있지만, 많은 요구사항에 곧 한계에 부딪히게 됩니다.