⚛ 선언적인 컴포넌트로 추상화, 그리고 수준의 통일
August 02, 2021
React를 기반으로 개발을 하다보면, 고민이 되는 부분이 있다.
컴포넌트 추상화의 수준을 정하는 것.
선언형 컴포넌트로 추상화
React에서는 상위 컴포넌트가 하위 컴포넌트에게 속성을 전달하여 오로지 전달받은 속성만을 사용하여 렌더링하는것이 가능하다.
<Title title="타이틀1" handleTitle={handleTitle} />위와 같은 속성전달을 통해 하위 컴포넌트 내부에는 비즈니스 로직을 생성하지 않아 재활용성을 높일 수 있게 된다.
또한, 해당 컴포넌트에서 사용하게 될 로직이나, 필수적으로 보여질 데이터들만을 속성으로 보내서 다른 역할을 빠르게 알 수 있다.
무엇을 하는지만 외부에서 보여지고, 어떻게 하는지는 컴포넌트 내부에서 처리한다.
이와같은 방식을 선언적인 코드라고 한다.
그리고 중요 개념만을 남기고 Title이라는 컴포넌트로 추상화 한 것이다.
추상화 과정에서 하위로 전달되야하는 속성들이 많아서, 컴포넌트의 재활용성이 떨어지는것 같다면 조합을 사용할 수 있었다.
<Styled.Form onSubmit={handleSubmit}>
<Styled.InputText>
<Input type="text" ref={textInput} autoComplete="off" />
</Styled.InputText>
<Styled.InputSubmit>
<Button>
<Text>검색</Text>
</Button>
</Styled.InputSubmit>
</Styled.Form>- 하나의 일 만을 수행하는 컴포넌트를 위해 필요한 속성만을 전달받을 수 있다.
- 상위에서 생성된 비즈니스로직들을 하위로 여러번 전달할 필요가 없이 한번에 전달할 수 있다.
어쩌면, 조합 또한 이 컴포넌트가 무엇을 하는지에만 집중하여 추상화 될 수 있도록 도와주는 방법이 아닐까 싶다.
추상화의 수준
높은 추상화
<Title type="title" title="리스트" />해당 컴포넌트 내부에서 어떤 작업, 어떤 마크업을 갖고 렌더링하는지는 신경쓰지 않고, 무엇을 사용할지만 전달하여 역할을 빠르게 알 수 있도록 높은 수준으로 추상화 할 수 있다.
중간 추상화
{
!data && <Button handleClick={handleFetchData}>불러오기</Button>
}React에서 많이보던 조건부 렌더링일 것이다. 이 또한, 높은 추상화와 유사하게 무엇을 할 지와 관련된 속성만을 전달하여 렌더링한다.
하지만, data에 따라서 다른 렌더링을 해야 하기 때문에, 추상화된 컴포넌트 외부의 조건 로직도 함께해야한다.
아마 그 때문에 중간 추상화 단계가 아닐까 싶다..
낮은 추상화
<div>
{data.map(res => (
<Item data={res} />
))}
</div>처음 높은 추상화와 비교해보았을 때 정말 큰 차이가 있다. 무엇을 할 지가 중심이 아닌 어떻게 할 지가 중심이된 코드이다.
추상화 수준의 정답
사실 추상화 수준을 정하는 데에 정답은 없다고 한다.
각각의 조직에서 선택한 수준에 따라가면 될 것 같다.
