인프런 커뮤니티 질문&답변
작성한 질문수
flex, row/column 외 3가지 문의드립니다!
작성
·
404
0
안녕하세요, vue3 기본, 실전 강좌에 이어 quasar 강좌도 알차게 구성해주신 덕에
생소한 세계에 잘 진입할 수 있었습니다. 감사합니다.
quasar 강좌수강 중 의문이 생겨 아래와 같이 질문드립니다.
질문 1.
<q-list :style="{'min-width': 100}">
<q-list style="min-width: 100px">
위의 두 가지는 같은 결과를 보여주는 것을 확인했습니다.
:(v-bind) 의 유무가 { }(중괄호) 사용 여부에 영향을 준 것일까요? 어떤 영향을 준 것일까요?
질문 2.
const leftColStyle = computed(() => ({ hidden: $q.screen.lt.md }));
위 코드에서 { }(중괄호)을 ( )(소괄호)로 한번 더 감싼 이유는 뭘까?
질문 3.
const totalCount = computed(() => response.value.headers['x-total-count']);
위 코드에서 response.value.headers['x-total-count’]에는 string값이 담겨 있는데,
이를 다시 반응형 데이터로 바꾸기 위해 computed를 사용했다는 설명을 해주셨습니다.
computed는 연산을 위해 사용한다고 이해했는데, 일반 데이터를 반응형으로 바꿀 때 사용한다고 하니 어리둥절합니다.
아래와 같은 방식으로 반응형으로 변환하는 것에는 어떤 문제가 있을까요?
const totalCount = ref(response.value.headers['x-total-count'])
질문 4.
flex와 row, column은 동급의 개념일까요?
container 안에서, container에 포함된 items들을
helper classes들을 통해 배치하는 것은 flex와 row/column이 동일하다고 생각했습니다.
차이..점을 모르겠습니다.
column은 flex-direction이 column인 flex일 뿐이라는 생각이 듭니다.
flex flex-center
row를 사용하면 items-center, justify center를 사용해야했던 것을 flex를 사용하면 flex-center로 한 번에 정렬 가능하다는 정도의 차이도 확인했고요.
답변 1
1
안녕하세요 🙂
질문 1.
<q-list :style="{'min-width': 100}">
<q-list style="min-width: 100px">
위의 두 가지는 같은 결과를 보여주는 것을 확인했습니다.
:(v-bind) 의 유무가 { }(중괄호) 사용 여부에 영향을 준 것일까요? 어떤 영향을 준 것일까요?
답변
v-bind는 객체(예: { name: 'gymcoding' })를 바인딩 할 때 사용하는 Vue directive 중 하나입니다. 그러므로 객체표현식인 {}(중괄호)를 사용한것입니다.
질문 2.
const leftColStyle = computed(() => ({ hidden: $q.screen.lt.md }));
위 코드에서 { }(중괄호)을 ( )(소괄호)로 한번 더 감싼 이유는 뭘까?
답변
화살표함수(Arrow Function)에서 객체 리턴을 한 줄로 표현할 때 사용할 수 있습니다. 아래 링크를 보시면 해당 문법을 확인할 수 있습니다.
[MDN] 화살표함수
질문 3.
const totalCount = computed(() => response.value.headers['x-total-count']);
const totalCount = ref(response.value.headers['x-total-count'])
답변computed(콜백함수) 콜백함수내의 반응형 데이터가 변경했을 때 다시 연산하여 값을 할당하는데요. 위 코드에서 response의 데이터가 변경되었을때 totalCount에 새로운 값을 할당하기위해서는 computed()를 사용해야겠죠? ref(response.value.headers['x-total-count']) 해당 코드는 단순히 초기값만 설정할 것이고요.
질문 4.
flex와 row, column은 동급의 개념일까요?
container 안에서, container에 포함된 items들을
helper classes들을 통해 배치하는 것은 flex와 row/column이 동일하다고 생각했습니다.
차이..점을 모르겠습니다.
column은 flex-direction이 column인 flex일 뿐이라는 생각이 듭니다.
flex flex-center
row를 사용하면 items-center, justify center를 사용해야했던 것을 flex를 사용하면 flex-center로 한 번에 정렬 가능하다는 정도의 차이도 확인했고요.
답변
맞습니다 🙂 flex, row, column은 Flex Container로 동급의 개념들입니다. 하지만 조금 차이가 있는데요.
저의 경우에는 Grid, List 배치를 해야할 경우에는 row, column을 사용하고요. 단순이 items들을 좌, 우, 중앙 배치해야 하는 경우에는 flex를 사용하는 편입니다. row를 이용해서 배치를 해보신후 row를 flex로 변경하고 개발자도구로 확인하시면 Style의 자세한 차이를 알 수 있을거에요~!
예를들면
<div class="flex">
<div class="col-6">AAAAA</div>
<div class="col-6">BBBBB</div>
</div>
<div class="row">
<div class="col-6">CCCCC</div>
<div class="col-6">DDDDD</div>
</div>이렇게 해보신 후 개발자도구에서 Flex Item(.col-6)들에게 적용된 스타일을 보시면 차이가 있는것을 확인할 수 있습니다.
답변 정말 감사합니다!
덕분에 의문이 생겼던 점들을 명확히 이해했습니다.
일전에 조언 주셨던 것처럼, '익숙'해질 수 있도록 계속해서 접해보도록 하겠습니다.
좋은하루 보내세요~!