인프런 커뮤니티 질문&답변
작성한 질문수
css에서 <View>가 없다면 왜 두 버튼 크기가 달라지는 지 궁금합니다.
작성
·
84
0
<Pressable
disabled={inValid}
style={({pressed}) => [
styles.container,
styles[size],
pressed ? styles[`${variant}Pressed`] : styles[variant],
inValid && styles.inValid,
]}
{...props}>
{/* <View style={styles[size]}> */}
<Text style={[styles[`${variant}Text`], styles.text]}>{label}</Text>
{/* </View> */}
</Pressable>
강의 내용대로 수정을 진행하면 만들어주신대로 코드가 정상작동합니다.
그런데, 저는 강의 3:49초에서 <View/>를 넣기 전에도 동일한 width여야 된다 생각하는데, 왜 여기서 두 버튼의 크기가 다르고 view를 넣으면 어째서 고쳐지는 지를 잘 모르겠습니다.
( text 크기 따라서 달라지는 거 같은데, pressable이 100%이니 view가 없어도 같은 크기여야하는 거 같은데 이해를 잘 못하겠습니다.)
답변 1
0
안녕하세요, 인프런 AI 인턴입니다.
윤세일님께서 경험하신 상황은 모바일 앱 개발 과정에서 자주 발생하는 레이아웃 문제입니다. View 컴포넌트를 사용했을 때 버튼의 크기가 동일해지는 이유는 View가 텍스트와 다른 요소들을 포함하며 레이아웃을 통제하는 역할을 하기 때문입니다.
여기서 중요한 사항은 View의 역할인데요, Pressable 컴포넌트는 기본적으로 자식 요소들을 감싸긴 하지만, 내부 요소들의 레이아웃을 명확하게 정의하지 않으면 자식 요소의 내용물에 따라 크기가 달라질 수 있습니다. 실제로 텍스트의 크기나 내용 길이에 따라 Pressable의 크기가 변화할 수 있다는 것이죠.
왜 View가 필요한가?
- 레이아웃 제어:
View는 내부에 포함된 요소들의 레이아웃을 제어하는 데 도움을 줍니다.View를 사용하면 특정 스타일(예: 넓이, 높이 등)을View에 지정하여 일관된 버튼 크기를 유지할 수 있습니다.
flex속성을 활용:View를 사용하여flexDirection,justifyContent,alignItems등의 스타일 속성을 적용하면 더 정밀하게 레이아웃을 조정할 수 있습니다.
만약 View 없이 텍스트의 길이에 의해 버튼의 크기가 달라지고 있다면, View를 사용하여 텍스트의 길이와 상관없이 버튼의 크기를 일정하게 유지할 수 있습니다. 이때 스타일링 내에서 flex 속성을 적용하여 정렬 문제를 해결할 수도 있습니다.
유사한 질문과 답변
윤세일님처럼 다양한 상황의 레이아웃 문제에 대한 해결 방법을 찾고자 질문한 게시물들을 추천드립니다:
- container 에 flexDirection row 넣은 이유가 궁금합니다.: 이 게시물에서는 flexDirection의 사용과 관련된 설명을 제공합니다.
- 스타일 깨짐 해결하기: 기본적인 레이아웃 문제를 해결하는 방법을 설명합니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.