styles 값을 상수로 사용하는 것
477
작성한 질문수 2
안녕하세요! 강의 잘 보고있습니다 ㅎ
styles에서 중복 사용되는 값들을 아래와 같이 상수로 사용하셨는데,
const BOTTOM = 30;
const BUTTON_WIDTH = 60;
상수명과 관계 없는 style인데도 해당 상수를 갖고와서 / 2라던지 +10라는 식으로 가공해서 사용하는 이유가 궁금합니다!
예를들어서 borderRadius는 30이기때문에 BUTTON_WIDTH / 2를 주셨고,
paddingRight는 70이기때문에 BUTTON_WIDTH + 10을
주셨는데, 다른 부분들은 그대로 두셔서 어떤 기준으로 적용하신건지 모르겠습니다!
right: 10 이 친구도 BUTTON_WIDTH - 50
paddingLeft: 20 이 친구도 BUTTON_WIDTH - 40
shadowOpacity: 0.5 이 친구도 BUTTON_WIDTH / 120
등등으로 사용할 수 있는데 말이죠!
혹시 상수를 이용해서 이렇게 스타일 안에서도 쓸 수 있다! 를 보여주시려고 예를 들어서 적용하신걸까요?!
6.8 :: 애니메이션 사용하기
답변 1
1
안녕하세요 knh님,
borderRadius는 30이기 때문이 아니라, 버튼 크기의 절반이기 때문에 BUTTON_WIDTH/2로 설정한 것입니다.
마찬가지로, paddingRight는 버튼의 크기보다 10만큼 큰 값으로 설정하기 위해 BUTTON_WIDTH + 10으로 설정한 것입니다.
right를 BUTTON_WIDTH - 50으로 해도 똑같이 10이긴 하지만, 그 의미가 전달되지 않습니다.
right 값은 버튼의 가로 길이보다 50만큼 작게 설정하고자 하는 것이아니라, 오른쪽에서 10만큼 떨어지게 설정하고 싶은 것입니다. 그래서 BUTTON_WIDTH - 50 이 아니라, 10이라고 직접 작성한 것입니다.
만약 버튼의 크기가 60이 아닌 70이 된다 하더라도, paddingRight는 BUTTON_WIDTH + 10으로 작성하겠지만, right는 BUTTON_WIDTH - 60으로 변경해야 겠죠?
이렇게 특정 값에 영향을 받을때는 BUTTON_WIDTH + 10 처럼 작성하면, BUTTON_WIDTH이 변경되어도 자동으로 적용되어 BUTTON_WIDTH + 10을 변경할 필요가 없다는 장점이 있습니다.
하지만, 해당 값에 영향을 받지 않는 값에 사용하면, 그 값이 변경될 때마다 코드를 변경해줘야 하는 불편함이 있습니다.
감사합니다.
expo 가 업데이트 되면서 문제가 발생한거같습니다.
0
355
2
navigation.replace() 작동하지 않습니다.
0
152
2
UpdateProfileScreen 에서 사진 버튼 클릭시 오류발생.
0
137
2
닉네임 수정 후 확인 버튼을 누를시 한글자만 출력됩니다.
0
181
2
모달창에서 버튼이 출력되지 않습니다.
0
109
2
로그인 에러 출력시 default값만 나옵니다.
0
151
2
안드로이드 기기에서 SignUp 화면 관련 질문드립니다.
0
94
2
간단한 질문 하나만 드리겠습니다!
0
80
2
text.trim() 부분에서 오류가 발생합니다.
0
131
2
profile 화면에서 내가 쓴 글이 나타나지 않습니다.
0
145
2
글 저장시 파일 저장위치 관련 질문드립니다!
0
117
2
구글 지도 API 관련 오류로 질문드립니다!
0
149
1
HeaderRight 버튼이 작동하지 않습니다.
0
94
2
사진이 나오지 않는 문제로 질문드립니다.
0
118
2
defaultProps 관련 문의 드립니당
0
252
2
이미지 목록을 받아오는 부분에서 IOS 에서 문제가 발생합니다.
0
135
2
안드로이드 기기에서 헤더 부분이 작동이 안됩니다.
0
92
2
[TypeError: unsubscribe is not a function (it is undefined)] 오류 발생으로 질문드립니다.
0
114
2
7.15 :: 상태 변수와 컴포넌트 언마운트 관련 질문드립니다!
0
104
2
SIgnIn SignUp 화면이 안나옵니다.
0
130
2
마지막 useEffect 부분 질문드립니다.
0
104
2
ImagPickerScreen을 만드는 과정에서 문제가 발생하여 글을 남깁니다.
0
213
2
eslint.config.mjs 파일에 plugin 설정방법
0
752
1
ESLint.json 파일이 생성되지 않습니다.
0
242
2