리액트 네이티브의 View 컴포넌트를 필요에 따라 Container Styled Component로 개발된 부분에 대해 스스로 이해도가 부족한 부분이 있어, 해당 내용들에 대해 알아보고 수정이 필요한 부분들을 찾아보기로 했다.
Container 의 종류
관련 내용을 ChatGPT에게 물어보기로 했다. 10가지 정도를 요청했고, 내용은 다음과 같다.
-
HorizontalContainer
수평 방향으로 요소를 나열할 때 사용합니다. 주로 리스트, 버튼 그룹, 아이콘 등을 나열할 때 유용합니다. -
VerticalContainer
수직 방향으로 요소를 나열할 때 사용합니다. 세로로 긴 페이지 내에서 섹션 또는 요소들을 나열할 때 적합합니다. -
ContentContainer
스크롤 가능한 내용을 담을 때 사용합니다. 긴 텍스트, 이미지 리스트 등 스크롤이 필요한 콘텐츠에 적합합니다. -
CenteredContainer
내용을 화면 가운데에 정렬할 때 사용합니다. 로딩 화면, 알림 메시지 등 중앙에 배치해야 하는 요소에 적합합니다. -
SafeAreaContainer
노치나 홈 버튼이 없는 최신 디자인의 스마트폰 화면에 안전하게 내용을 표시할 때 사용합니다. 안전 영역을 고려한 레이아웃을 구성할 수 있습니다. -
FlexContainer
유연한 레이아웃을 구성할 때 사용합니다. flex 속성을 활용하여 다양한 화면 크기와 방향에 맞게 요소들을 배치합니다. -
PaddedContainer
일정한 패딩을 가진 컨테이너로, 내부 요소와의 여백을 주어 깔끔한 레이아웃을 만들 때 사용합니다. -
FullWidthContainer
화면의 전체 너비를 차지하는 컨테이너로, 주로 배너, 헤더, 푸터 등에 사용됩니다. -
FixedHeightContainer
고정된 높이를 가진 컨테이너로, 특정 높이를 유지해야 하는 요소에 사용됩니다. 예를 들어, 고정된 크기의 이미지 갤러리나 슬라이더에 적합합니다. -
BackgroundContainer
배경 이미지나 색상을 설정할 수 있는 컨테이너로, 페이지나 섹션의 배경을 꾸밀 때 사용합니다.
머리속으로 정리되지 않던 컨테이너의 쓰임새를 확인했다. View만 사용하는 것보다 그 역할에 따라 다양한 Container를 사용하는 방식이 일정한 디자인을 유지하고, 이름만으로 화면을 이해하기에 장점이 있음을 알게 되었다.
현재 사용중인 Container
View 와 Container 의 차이점을 확실히 느끼지 못한 부분은 제대로 사용하지 못했기 때문인 것 같아, 현재 어플에서 사용중인 컨테이너를 확인해보았다. 현재 유용하게 쓰이는 컨테이너는 다음과 같았다.
- HorizontalContainer
- ContentContainer
- FullWidthContainer (= NoOutLineFullScreenContainer)
문제점
ContentContainer 의 역할
ChatGpt에서 소개된 내용과 달리 ContentContaienr는 스크롤이 필요한 컨텐츠보다 기본 Container로 여러 기능으로 자주 사용되고 있었다. 추가 화면분석이 필요하지만 우선 아래와 같은 Container로 역할 분리가 필요해 보였다.
- FlexContainer
- CenteredContainer
- FixedHeightContainer
일정하지 않고 계속 추가되는 props
1) 반복되는 props
컨테이너의 경우, ContentContainer에 설정된 스타일에 수정되는 props만 추가되는 방식으로 코딩되었는데, 다른 Text 컴포넌트는 같은 props를 반복해서 적은 부분들이 있었다. 해당 부분들은 컨테이너 방식처럼 수정되어야겠다.
- 같은 코드가 반복되는 Text 컴포넌트
export const XXXLargeText = styled.Text<Props>`
font-family: 'Pretendard';
color: ${props => (props.color ? props.color : Color.BLACK)};
font-size: 26px;
font-weight: ${props => props.fontWeight || 'normal'};
line-height: ${props => (props.lineHeight ? props.lineHeight : 1.0)};
`;
export const XXLargeText = styled.Text<Props>`
font-family: 'Pretendard';
color: ${props => (props.color ? props.color : Color.BLACK)};
font-size: 24px;
font-weight: ${props => props.fontWeight || 'normal'};
`;
- ContentContainer 에서 변경되는 값만 추가된 Container 코드
export const HorizontalContentContainer = styled(ContentContainer)`
flex-direction: row;
`;
2) number 타입으로 입력되고, px 단위로 기본 설정된 props
처음 styled component 개발시, 기본 단위인 px를 Styled component 코드에 넣어, number 만 입력해서 스타일이 적용될수 있도록 만들었다. 당시에는 typescript를 쓰는 만큼 입력되는 값에 대한 타입제한을 주고 싶었지만, 잘못된 방식이었던 것 같다.
width,height 의 경우, %도 사용될 수 있는 만큼 타입을 number에서 string으로 변경이 필요해 보인다.
export const MediumImage = styled.Image<Props>`
width: ${({width}) => (width ? `${width}px` : '33.94px')};
height: ${({height}) => (height ? `${height}px` : '33.25px')};
`;padding 의 경우, 숫자만 입력될 경우, 상하좌우 모두 같은 크기의 paddin이 들어가게 된다. 하지만 좌우 또는 상하에 다른 padding 이 들어간다면, '3px 1px' 값도 입력 가능해야겠다.
export const ContentContainer = styled.View<ContentContainerProps>`
padding: ${props => (props.padding ? props.padding + 'px' : '0px')};
...
`;3) props 의 단위
예) padding, margin 의 단위
각 화면마다 padding, margin의 값이 일정하지 않은 상태이다. 특정 단위를 설정하여 화면을 일정하게 유지되면 좋을 듯하다.
const margins = {
sm: ".5rem",
base: "1rem",
lg: "2rem",
xl: "3rem",
};
const paddings = {
sm: ".5rem",
base: "1rem",
lg: "2rem",
xl: "3rem",
};