인프런 커뮤니티 질문&답변
작성한 질문수
styles 값을 상수로 사용하는 것
작성
·
447
·
수정됨
0
안녕하세요! 강의 잘 보고있습니다 ㅎ
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을 변경할 필요가 없다는 장점이 있습니다.
하지만, 해당 값에 영향을 받지 않는 값에 사용하면, 그 값이 변경될 때마다 코드를 변경해줘야 하는 불편함이 있습니다.
감사합니다.
감사합니다 😁