css에서 <View>가 없다면 왜 두 버튼 크기가 달라지는 지 궁금합니다.
113
작성한 질문수 2
<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의 사용과 관련된 설명을 제공합니다.
- 스타일 깨짐 해결하기: 기본적인 레이아웃 문제를 해결하는 방법을 설명합니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
react-native-screens 버전 호환 문제
2
153
1
안드로이드 실행 중 Drawer네비게이션과 MapView 성능 문제
0
103
2
해당 강의 부분은 실제 활용하기에 부족해 제가 해결한 방법입니다.
0
96
1
소스코드가 강의 순서랑 다른가요?
0
72
2
현재 Windows에서 VsCode로 작업 중인데 추후에 IOS도 가능하게 하려면
0
115
2
react-native-fast-image는 react 19 버전에서 설치가 안되나요?
0
209
2
SQL Shell의 역할이 무엇인가요?
0
91
1
혹시 해당 강의에서invalidateQueries를 사용한 이유가 있을까요?
0
79
2
빠르게 실행해보고싶습니다.
0
82
1
강의 수강 순서 관련
0
70
1
애뮬레이터 실행 방법
0
99
2
무료 Apple ID로 실기기 테스트 가능한가요?
0
90
2
ios 실기기 연결
0
70
2
npm run ios에러
0
74
1
10월 삭제 예정인 강의는 이유를 알 수 있을까요?
0
101
1
캘린더 개발 후에 navigation 에 대해서 궁금한 점이 있습니다.
0
51
1
안드로이드 위치 권한 이슈 2가지 문의
0
71
1
지도가 보이려면 음.. 작성해주신 스타일과 다르게
0
74
0
제대로 설치한거같은데 안드로이드랑 ios 둘다 앱실행이 안되는것같아요
0
83
3
강의 내용을 보면 전체적으로 function 함수 키워드를 사용하시는데
0
69
2
강의 3-9 에서 useGetRefreshToken 훅 안에 즉시 함수로 처리하는 이유가 궁금합니다!
0
82
2
사내에서 figma.com 업로드 안되나요?
0
96
1
AWS EC2 + RDS 설정
0
85
2
안드로이드 안켜집니다.
0
91
2