Provider를 외부에 노출하는 것보다 내부 로직으로 숨기는 ... - 인프런

[React / VanillaJS] UI 요소 직접 만들기 Part 2

셀렉트박스 (1/5) 기본 기능 구현

Provider를 외부에 노출하는 것보다 내부 로직으로 숨기는 것은 어떤가요?

해결된 질문

작성

173

      <Dropdown.Provider list={data}>
        <Dropdown.Container>
          <Dropdown.Trigger></Dropdown.Trigger>
          <Dropdown.List></Dropdown.List>
        </Dropdown.Container>
      </Dropdown.Provider>

위와같이 Provider을 노출하는 것보다, 아래와 같이 Container 내부에 Provider을 불러와서 사용하는 것이 캡슐화 측면에서 좋지 않나요?!

// DropdownContainer


<DropdownContextProvider>
      <div
        className={cx("Dropdown")}
        onKeyDown={handleKeyDown}
        onClick={(e) => e.stopPropagation()}
      >
        {children}
      </div>
</DropdownContextProvider>


<Dropdown.Container list={data}>
      <Dropdown.Trigger></Dropdown.Trigger>
      <Dropdown.List></Dropdown.List></Dropdown.Container>

react typescript dom ui vanilla-js

답변 2

정재남

지식공유자

말씀하신 방법이 깔끔하긴 하지만,
그렇게 하면 Container에서는 useDropdown 훅을 사용하지 못하게 됩니다.
컨텍스트는 Provider로 감싼 내부의 컴포넌트들에서만 접근 가능하기 때문입니다.

즉 최상단 컴포넌트에는 Provider로 감싸주는 것이 필요하고,
나머지 모든 컴포넌트는 그보다 하위에 존재해야 하기 때문에,
말씀하신 방식에 따르더라도 Container 하위에 또다른 컴포넌트를 만들어야 하게 될 수 있습니다.
혹은 그 방식에 따르면서 Container에서는 context에 접근하지 않도록 하거나요.

leejha

질문자

아아 Container에서는 useDropdown을 사용하지 못하는군요! 말씀 감사합니다🙏

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다.

leejha님께서 질문하신 내용에 대해서 답변드립니다.

Provider를 외부에 노출하는 방식과 내부 로직으로 숨기는 방식 사이의 선택은 주로 캡슐화와 컴포넌트의 재사용성 측면을 고려하여 결정됩니다. 외부에서 Provider를 노출하는 방식은 컴포넌트의 사용자가 Provider에 접근하여 데이터를 조작할 수 있도록 하여 유연성을 제공합니다. 반면에, Provider를 내부에 숨기면 컴포넌트의 구현 세부 사항을 추상화하며, 사용자로부터 내부 로직을 숨겨 캡슐화를 강화할 수 있습니다.

내부에 Provider를 숨기는 방식은 컴포넌트의 재사용성을 높이고, Provider의 사용을 컴포넌트 내부로 제한함으로써 API의 복잡성을 낮출 수 있는 장접이 있습니다. 이는 컴포넌트를 사용하는 측면에서 보다 쉽고 안전하게 컴포넌트를 활용할 수 있도록 합니다.

따라서 답변드리자면, 캡슐화와 재사용성 측면에서 Provider를 내부 로직으로 숨기는 것이 좋을 수 있습니다. 하지만, 이는 개발하고자 하는 애플리케이션의 구조와 요구 사항에 따라 다르므로, 구체적인 상황을 고려하여 결정하는 것이 중요합니다.

인프런 커뮤니티 질문&답변

Provider를 외부에 노출하는 것보다 내부 로직으로 숨기는 것은 어떤가요?

Provider를 외부에 노출하는 것보다 내부 로직으로 숨기는 것은 어떤가요?