인프런 커뮤니티 질문&답변
작성한 질문수
4-3 UI 구성하기 화면
해결된 질문
작성
·
78
0
안녕하세요. 15분 23초 부분 전에 화면이 잘린 것 같아 문의드려요.
그 전의 부분에서는 이렇게 썼는데
const OperatorButton = styled(NumberButton)`
height: 8%;
width: 13%;
`;15분 23초 이후에 갑자기
이 부분이
const OperatorButton = styled.TouchableOpacity로 바껴져 있어요. ㅠㅠ 자동변환인가여? 이해가 안돼요
답변 2
1
안녕하세요, 인프런 AI 인턴입니다. 이소연님.
React Native 수업에서 styled-components를 사용하여 OperatorButton을 생성하는 과정에서 혼동이 있으신 것 같습니다. styled-components는 기존의 컴포넌트를 스타일링하거나 새로운 스타일을 덧씌워주는 유연한 방법을 제공합니다. 이를 통해 NumberButton으로부터 OperatorButton을 스타일링하거나, 새로이 정의할 때 styled.TouchableOpacity로 정의할 수 있습니다.
주요 차이점 설명
styled(NumberButton): 이미 정의된 컴포넌트(여기서는NumberButton)에서 스타일을 확장하여 새로운 스타일링 컴포넌트를 생성할 수 있습니다.
styled.TouchableOpacity:TouchableOpacity는 기본적으로 반응형 사용자 입력을 지원하는 React Native의 컴포넌트입니다. 이를 직접 스타일링하여 사용할 수 있는 방법이기도 합니다.
왜 두 가지 방법을 사용하나요?
- 유연한 스타일링:
styled-components로 컴포넌트를 확장하는 방식과 React Native 기본 컴포넌트를 직접 스타일링하는 두 접근법 모두 같은 결과를 제공할 수 있지만 코드의 가독성이나 재사용성을 높이는데 중점을 둘 수 있습니다.
- 개발 스타일: 개발 단계에서 스타일링 방법이 변경되거나, 스타일 요구사항에 따라 직접 스타일링하기도 하고 기존 것을 확장하기도 합니다.
이전 예제에서 NumberButton이라는 컴포넌트가 있었고, 이를 확장하기 위해 styled(NumberButton)을 사용했지만, 이후 더 특별한 터치 이벤트를 사용하기 위해 styled.TouchableOpacity로 변경한 것일 수 있습니다.
참고 URL
- ### expo로 설치해도 되나요?
- 내용 요약: React Native에서
expo를 사용하여 프로젝트를 설정하고 구성하는 방법에 대해 설명합니다. 다양한 설정 및 폴더 구조에 대한 궁금증을 해결할 수 있습니다.
- 내용 요약: React Native에서
위의 설명들이 이해에 도움이 되셨길 바라며, 상술한 방식들이 학습과 활용에 유효하기를 바랍니다. 추가적인 질문이나 궁금증이 있으실 경우 언제든지 말씀해 주세요.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
0
아마 넘버 버튼이 TouchableOpacity여서 처음에 복사본으로 스타일을 지정해 줬던 것 같은데요, 강의 영상에서 styled(numberbutton) 부분을 코드가 복잡하므로 styled.TouchableOpacity로 변경하겠다는 내용을 설명드렸습니다..!
코드는 화면과 똑같이 수정해 주시면 되겠습니다.