Component와 Layout
Component는 어떠한 기능을 하는 독립적인 요소라고 할 수 있고
비즈니스 로직을 담고 있는 경우가 대부분이다.
(Button, Input, TextField, Modal, Card ... 등 )
Layout은 Component들을 정리하고 배치하는 개념이다.
Component안에 존재할 수도 있고
Layout 자체로 Component가 될 수 있다.
당연하게도 Layout은 비즈니스 로직이 포함되지 않아야 한다.
(Divider, FlexContainer, ContentWrapper ... )
아주 중요한 개념이고, 기본적인 내용이지만
이 부분을 간과하면서 작성한 코드들이 많았다.
잘 못 만든 CustomInput
일반적인 Form 구성을 개발요청이 들어왔다.
기존 Input에는 Key값을 표현하는 것이 없으니
Input과 조합하여 CustomInput을 만들어야겠다고 생각했다.
(디자인된 기본 Input과 Button은 만들어져 있었다고 한다)
const UserInformationForm = () => {
return (
<StyledForm>
<StyledInputWrapper>
<CustomInput keyName="이름" onChange={} ... />
<CustomInput keyName="나이" onChange={} ... />
<CustomInput keyName="전화번호" onChange={} ... />
</StyledInputWrapper>
<Button>저장하기</Button>
</StyledForm>
)
}CustomInput이라는 Component를 만들었고
Form의 자식으로 채웠으니 이제 Style을 먹여야한다.
- Form
- CustomInput간의 간격
- CustomInput과 Button의 간격
StyledForm {
padding: 10px 20px;
}
CustomInput {
margin-bottom: 5px;
}
StyledInputWrapper {
margin-bottom: 10px;
}브라우저에 render를 해보니 원하는대로 잘 나왔다.
그런데, 무엇이 문제일까?
언제든 재사용될 수 있다
새로운 컴포넌트 개발 요청이 들어왔다.
만들었던 CustomInput의 형태와 버튼이 붙어있는 디자인이다.
그런데 가져다 쓰려고하니 문제가 발생했다.
CustomInput에 Margin을 주었기 때문에
바로 가져다 쓸 수 없게 된 것이다.
해결 못할 문제는 아니다.
- CSS를 override하거나
- Component를 새로 만들거나
- 기존 Component를 수정하거나
방법은 다양하지만 기존에 제대로 생각하지 않았기 때문에
위 작업을 진행하는 시간과 기존것들을 확인하는 시간을 써야했다.
어떤 부분을 생각해야할까?
'Component'와 'Layout'을 확실하게 구분지어야 한다.
Component는 특수한 상황이 아니고서는
Component 본체에 margin을 주거나
position에 영향을 주는 코드를 작성하면 안된다.
Layout (Component)에 의해 positioning 되어야 한다.
항상 재사용될 수 있음을 고려해야 한다.
디자인 시스템이 갖추어져 있지 않고
나중에 또 사용한다는 이야기를 듣지 못했다 하더라도
그냥 재사용될 것이라고 스스로 정의를 내려도 좋다.
정말 특수한 컴포넌트도 갑자기 재사용될 때가 있다.
Layout Style에 대해서 잘 이해하고 있어야 한다.
flex, grid, float, display 등의 CSS 속성들은
Layout을 구성할 때 많이 사용하는 속성들이다.
어떻게 동작하고, 어떻게 사용되는지에 익숙해져야 한다.
각 속성들의 특성들의 이해도에 따라 디자인이 다르게 보인다.
정리
Input을 누가 그렇게 작성하나요? 라고 할 수 있다.
하지만 실제 경험이었고, 깨닫지 못했던 부분이기도 했다.
서비스가 발전 할 수록 다양한 형태로 컴포넌트들이 만들어진다.
퇴근할 시간이 되어가서, 마감기한이 다가와서, 잘 몰라서..
다양한 상황속에서 놓치는 경우를 많이 경험했고 봐왔다.
컴포넌트가 조합된 컴포넌트나 또는 거대한 컴포넌트를 만들때
비즈니스 로직에 빠져서 놓친적도 있었고
반대로 간단한 컴포넌트인 경우에도, "에이 이정도는 뭐.."
라고 생각한 경우도 있었다.
다양한 사이트들을 둘러보았을 때나,
주니어들의 컴포넌트를 가져다 쓸 때나,
나를 반성할 수 있는 형태를 많이 보았다.
Style에 정답이 있는 것은 아니지만
미래의 나를 위해서, 함께할 동료들을 위해서
한 번 더 고민해보는 습관을 가져보자.
