# 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 ์†์„ฑ์„ ์ฝ˜์†”์— ์ถœ๋ ฅํ•ด ๋ณด๋ฉด ๋‹ค์Œ ๋‚ด์šฉ์ด ๋‚˜์˜ต๋‹ˆ๋‹ค.

toRefs()๋กœ ๋””์ŠคํŠธ๋Ÿญ์ฒ˜๋ง ํ•œ ํ”„๋กญ์Šค ์†์„ฑ ์ŠคํŽ™

message ์†์„ฑ ๊ฐ’์ธ hi๊ฐ€ ์ถœ๋ ฅ๋˜์ง€ ์•Š๊ณ  ObjectRefImpl์ด๋ผ๋Š” ๊ฐ์ฒด๊ฐ€ ์ถœ๋ ฅ๋ฉ๋‹ˆ๋‹ค. ์ด ๊ฐ์ฒด๋Š” ๋งˆ์น˜ ๋ฐ˜์‘์„ฑ์„ ์ฃผ์ž…ํ•˜๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉํ–ˆ๋˜ ref() API๋ฅผ ์‹คํ–‰ํ•œ ๊ฒƒ๊ณผ ๊ฐ™์€ ํ˜•ํƒœ์ž…๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ, ์•„๋ž˜์™€ ๊ฐ™์ด message.value์— ์ ‘๊ทผํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.





ย 





setup(props) {
  const { message } = toRefs(props);
  
  const reversedMessage = computed(() => {
    return message.value.split('').reverse().join('');
  });

  return { reversedMessage }
}