# Props - setup() Vue 3
ํ๋กญ์ค๋ ์ปดํฌ๋ํธ ๊ฐ์ ๋ฐ์ดํฐ๋ฅผ ์ฃผ๊ณ ๋ฐ๊ธฐ ์ํ ์์ฑ์ ๋๋ค. ์ปดํฌ์ง์ (Composition API)์์ ํ๋กญ์ค๋ฅผ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ ์์๋ณด๊ฒ ์ต๋๋ค.
# setup()์์ props ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ
items
๋ผ๋ ํ๋กญ์ค ์์ฑ์ setup()
ํจ์์์ ์ ๊ทผํ๋ ค๋ฉด ๋ค์๊ณผ ๊ฐ์ด ์์ฑํฉ๋๋ค.
<script>
export default {
props: ['items'],
setup(props) {
console.log(props.items);
}
}
</script>
์ ์ฝ๋๋ List ์ปดํฌ๋ํธ์ items
ํ๋กญ์ค ์์ฑ์ ์ ์ํ๊ณ ์
์
ํจ์ ์์์ ํ๋กญ์ค ์์ฑ์ ์ถ๋ ฅํ ์ฝ๋์
๋๋ค.
setup()
ํจ์์ ์ฒซ ๋ฒ์งธ ํ๋ผ๋ฏธํฐ๋ ํ๋กญ์ค ์์ฑ์ ์๋ฏธํฉ๋๋ค. ์ธ์คํด์ค ์ต์
์์ฑ์ผ๋ก props
๋ฅผ ์ ์ํ๊ณ ๋๋ฉด setup()
ํจ์์์ ์ฒซ ๋ฒ์งธ ํ๋ผ๋ฏธํฐ๋ก ํ๋กญ์ค ์์ฑ์ ์ ๊ทผํ ์ ์์ต๋๋ค.
# setup()์์ props๋ฅผ ๋ค๋ฃฐ ๋ ์ฃผ์ํ ์
setup()
ํจ์์์ ํ๋กญ์ค ์์ฑ์ ์ฌ์ฉํ ๋ ๋์คํธ๋ญ์ฒ๋ง ๋ฌธ๋ฒ์ ์ฃผ์ํด์ผ ํฉ๋๋ค. ํ๋กญ์ค ์์ฑ์ด ์ฌ๋ฌ๊ฐ ์ ์๋์ด ์์ ๋ ์๋ง ๋ณธ๋ฅ์ ์ผ๋ก ๋ค์๊ณผ ๊ฐ์ด ์์ฑ์ ๊บผ๋ด์ด ์ธ ์ ์๋ ๋์คํธ๋ญ์ฒ๋ง ๋ฌธ๋ฒ์ ์ฌ์ฉํ ์๋ ์์ํ
๋ฐ์.
<script>
export default {
props: ['items', 'userId', 'title'],
setup(props) {
const { items, userId, title } = props;
console.log(items);
}
}
</script>
์ด๋ ๊ฒ ํ๋ฉด ์๋ฉ๋๋ค. ์ํ๊น์ง๋ง ์์์ ์ดํด๋ดค๋ ์ฝ๋์ฒ๋ผ props.items
ํํ๋ก ์ ๊ทผํด์ ์ฌ์ฉํ๋ ๊ฒ์ด ์ข์ต๋๋ค. ์๋ํ๋ฉด ํ๋กญ์ค ์์ฑ์ ๋์คํธ๋ญ์ฒ๋ง ๋ฌธ๋ฒ์ ์ฌ์ฉํ๋ฉด ๋ฐ์์ฑ(๋ฆฌ์กํฐ๋นํฐ)์ด ์ฌ๋ผ์ง๊ธฐ ๋๋ฌธ์
๋๋ค.
์๋ ์ฝ๋๋ message
๊ฐ์ด ๋ณํ์ ๋ reversedMessage
๊ฐ์ด ์ ์์ ์ผ๋ก ๊ฐฑ์ ๋์ง ์์ต๋๋ค.
<script>
import { computed } from 'vue';
export default {
props: ['message'],
setup(props) {
const { message } = props;
const reversedMessage = computed(() => {
return message.split('').reverse().join('');
});
return { reversedMessage }
}
}
</script>
์๋ํ๋ฉด ํ๋กญ์ค ์์ฑ์ธ message
๊ฐ์ด ๋ณํ ๋๋ง๋ค computed()
๋ก์ง๋ ๊ฐ์ด ์คํ์ด ๋์ด์ผ ํ๋๋ฐ ๋ฐ์์ฑ์ด ์ฌ๋ผ์ก๊ธฐ ๋๋ฌธ์ computed()
์์ ๋ก์ง์ด ์คํ๋์ง ์๊ธฐ ๋๋ฌธ์
๋๋ค. ๋ฐ๋ผ์, ์๋์ ๊ฐ์ด props.message
ํํ๋ก ์ ๊ทผํ๋ ๊ฒ์ ์ถ์ฒํฉ๋๋ค.
<script>
import { computed } from 'vue';
export default {
props: ['message'],
setup(props) {
const reversedMessage = computed(() => {
return props.message.split('').reverse().join('');
});
return { reversedMessage }
}
}
</script>
# ๋์คํธ๋ญ์ฒ๋ง์ ์ฐ๊ณ ์ถ๋ค๋ฉด?
๊ทธ๋๋ ์ปดํฌ๋ํธ์์ ํ๋กญ์ค ์์ฑ์ ๋น๋ฒํ๊ฒ ์ฌ์ฉํ๊ณ ์๋ค๋ฉด ๋์คํธ๋ญ์ฒ๋ง์ ์ฌ์ฉํ๊ณ ์ถ์ ๊ฒ๋๋ค. ๊ทธ๋ด ๋๋ ๋ค์๊ณผ ๊ฐ์ด toRefs() API (opens new window)๋ฅผ ์ฌ์ฉํฉ๋๋ค.
<script>
import { toRefs } from 'vue';
export default {
props: ['message'],
setup(props) {
const { message } = toRefs(props);
}
}
</script>
toRefs()
๋ฅผ ์ํฌํธํ๊ณ props
๋ฅผ ์ธ์๋ก ๋๊ธฐ๋ฉด ํ๋กญ์ค ์์ฑ์ ๋์คํธ๋ญ์ฒ๋ง ํ ์ ์์ต๋๋ค. ๋ค๋ง, ์ด๋ ๊ฒ ํ๋ค๊ณ ํด์ ๊ธฐ์กด๊ณผ ๊ฐ์ด ๋์ผํ๊ฒ ํ๋กญ์ค ๊ฐ์ ์ ๊ทผํ ์ ์์ต๋๋ค. ์๋ ์ฝ๋์์ ๋์คํธ๋ญ์ฒ๋งํ message
๋ ์์ํ ๊ฒ๊ณผ ๋ค๋ฅด๊ฒ ๊ฐ์ผ๋ก ์ธ์๋์ง ์์ต๋๋ค.
<script>
import { computed } from 'vue';
export default {
props: ['message'],
setup(props) {
const { message } = toRefs(props);
const reversedMessage = computed(() => {
return message.split('').reverse().join(''); // ์๋ฌ ๋ฐ์: `message.split is not a function`
});
return { reversedMessage }
}
}
</script>
์ ์์ ๊ฐ์ ๊ฒฐ๊ณผ๊ฐ ๋์ค๋์ง ๋์ผ๋ก ํ์ธํ๊ธฐ ์ํด์ ๋์คํธ๋ญ์ฒ๋งํ message
์์ฑ์ ์ฝ์์ ์ถ๋ ฅํด ๋ณด๋ฉด ๋ค์ ๋ด์ฉ์ด ๋์ต๋๋ค.
message
์์ฑ ๊ฐ์ธ hi๊ฐ ์ถ๋ ฅ๋์ง ์๊ณ ObjectRefImpl์ด๋ผ๋ ๊ฐ์ฒด๊ฐ ์ถ๋ ฅ๋ฉ๋๋ค. ์ด ๊ฐ์ฒด๋ ๋ง์น ๋ฐ์์ฑ์ ์ฃผ์
ํ๊ธฐ ์ํด ์ฌ์ฉํ๋ ref() API๋ฅผ ์คํํ ๊ฒ๊ณผ ๊ฐ์ ํํ์
๋๋ค. ๋ฐ๋ผ์, ์๋์ ๊ฐ์ด message.value
์ ์ ๊ทผํด์ผ ํฉ๋๋ค.
setup(props) {
const { message } = toRefs(props);
const reversedMessage = computed(() => {
return message.value.split('').reverse().join('');
});
return { reversedMessage }
}