리액트 네이티브에 대해서 알아가다보니 궁금한 게 생겨서 작성해보려한다. 많은 코드에서 볼 수 있는 props와 "..."(Spread Operator)가 무슨 역할을 하는지에 대해서 알아보자!

Props

props는 properties가 줄여진 표현이다. 부모 컴포넌트로부터 전달받은 속성값을 말한다. 부모 컴포넌트에서 자식 컴포넌트에게 props를 넘기면 자식 컴포넌트는 받은 props를 사용할 수는 있지만 변경할 수는 없다.

하나의 props 전달

<Button title="hello">

위 코드처럼 Button 컴포넌트에 title 속성을 지정하면 Button 컴포넌트의 props로 title이 전달된다.

예시를 들어보겠다.(feat. perplexityㅎㅎ)
먼저 자식 컴포넌트인 'Greeting'을 만든다.

import React from 'react';
import { Text } from 'react-native';

const Greeting = (props) => {
  return <Text>안녕하세요, {props.name}님!</Text>;
};

export default Greeting;

이제 부모 컴포넌트인 'App'에서 'Greeting' 컴포넌트를 사용한다.

import React from 'react';
import { View } from 'react-native';
import Greeting from './Greeting';

const App = () => {
  return (
    <View>
      <Greeting name="홍길동" />
      <Greeting name="김철수" />
      <Greeting name="이영희" />
    </View>
  );
};

export default App;

이 예시에서

• name이 props이다. 부모 컴포넌트인 App에서 자식 컴포넌트 Greeting으로 전달되는 데이터이다.
• Greeting 컴포넌트는 전달받은 name prop을 사용하여 인사말을 표시한다.
• App 컴포넌트에서는 Greeting 컴포넌트를 3번 사용하며 각각 다른 name 값을 전달한다.

화면에는 다음과 같이 표시된다.

안녕하세요, 홍길동님!
안녕하세요, 김철수님!
안녕하세요, 이영희님!

여러 개의 props 전달

그렇다면 컴포넌트를 여러개 전달할 때는 어떻게 할까?! 예시를 들어 설명해보겠다!

학생 정보를 보여주는 카드를 만든다고 가정해보자! 먼저 자식 컴포넌트를 만든다.

import React from 'react';
import { View, Text } from 'react-native';

const StudentCard = ({ name, age, grade, hobby }) => {
  return (
    <View>
      <Text>{name}</Text>
      <Text>나이: {age}세</Text>
      <Text>학년: {grade}학년</Text>
      <Text>취미: {hobby}</Text>
    </View>
  );
};

export default StudentCard;

그리고 이 StudentCard 컴포넌트를 사용하는 부모 컴포넌트를 만든다.

import React from 'react';
import { View, ScrollView } from 'react-native';
import StudentCard from './StudentCard';

const ClassRoom = () => {
  return (
    <ScrollView>
      <StudentCard name="김철수" age={15} grade={3} hobby="축구" />
      <StudentCard name="이영희" age={16} grade={3} hobby="독서" />
      <StudentCard name="박민수" age={14} grade={2} hobby="그림그리기" />
    </ScrollView>
  );
};

export default ClassRoom;

이 예시에서

• StudentCard 컴포넌트는 4개의 props를 받는다. name, age, grade, hobby
• ClassRoom 컴포넌트에서 StudentCard를 여러 번 사용하며 각각 다른 학생의 정보를 props로 전달한다.
• 각 StudentCard는 전달받은 props를 사용하여 학생 정보를 표시한다.

화면에는 다음과 같이 출력된다.

[김철수]
나이: 15세
학년: 3학년
취미: 축구

[이영희]
나이: 16세
학년: 3학년
취미: 독서

[박민수]
나이: 14세
학년: 2학년
취미: 그림그리기

children

children은 컴포넌트의 여는 태그와 닫는 태그 사이에 있는 모든 jsx요소나 컴포넌트를 나타낸다. 부모 컴포넌트에서 자식 컴포넌트로 전달되는 내용을 의미한다. 컴포넌트가 다른 컴포넌트를 포함할 때, 그 안에 들어가는 모든 내용에 접근할 수 있게 해준다!

알기쉽게 예시로 설명해보겠다.
카드 형태의 UI를 만드는 재사용 가능한 컴포넌트를 생각해보자.

import React from 'react';
import { View, Text } from 'react-native';

const Card = ({ children }) => {
  return (
    <View>
      <View>
        {children}
      </View>
    </View>
  );
};

const App = () => {
  return (
    <View>
      <Card>
        <Text>환영합니다!</Text>
        <Text>이것은 카드 내용입니다.</Text>
      </Card>

      <Card>
        <Text>홍길동</Text>
        <Text>웹 개발자</Text>
      </Card>
    </View>
  );
};

export default App;

이 예시에서

• Card 컴포넌트는 children을 사용하여 카드 내부에 들어갈 내용을 유연하게 받는다.
• App 컴포넌트에서 Card를 두 번 사용하고 있다. 각 Card 안에 다른 내용을 넣었다.
• 첫 번째 Card는 제목과 문단을 포함한다.
• 두 번째 Card는 이미지, 이름, 직업을 포함한다.

children은 컴포넌트의 재사용성을 높이고, 유연한 구조를 만드는 데 유용하다. 특히 자식 엘리먼트나 컴포넌트의 수나 구조를 미리 알 수 없는 경우에 효과적으로 사용된다.

...(Spread Operator)

스프레드 연산자는 props를 다룰 때 매우 유용하게 사용된다.

props와 함께 사용

음식 주문 앱에서 메뉴 아이템을 표시하는 컴포넌트를 만든다고 가정해보자.
먼저, MenuItem 자식 컴포넌트를 만든다.

const MenuItem = ({ name, price, description }) => {
  return (
    <View style={styles.menuItem}>
      <Text style={styles.name}>{name}</Text>
      <Text style={styles.price}>{price}원</Text>
      <Text style={styles.description}>{description}</Text>
    </View>
  );
};

여러 메뉴 아이템을 표시하는 Menu 부모 컴포넌트를 만든다.

const Menu = () => {
  const menuItems = [
    { name: "불고기", price: 8000, description: "맛있는 한국식 불고기" },
    { name: "비빔밥", price: 7000, description: "영양만점 비빔밥" },
    { name: "김치찌개", price: 6000, description: "얼큰한 김치찌개" }
  ];

  return (
    <View>
      {menuItems.map((item, index) => (
        <MenuItem key={index} {...item} />
      ))}
    </View>
  );
};

이 예시에서

• menuItmes 배열에 각 메뉴 아이템의 정보가 객체로 저장되어 있다.
• map 함수를 사용해 각 메뉴 아이템을 순회한다.
• MenuItem {...item} / 부분에서 스프레드 연산자를 사용한다.

이렇게 하면 {...items}는 다음과 같이 펼쳐진다.

<MenuItem name={item.name} price={item.price} description={item.description} />

이외에도 다양하게 사용할 수 있다.

배열 복사 및 확장

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];
console.log(arr2); // [1, 2, 3, 4, 5]

문자열을 개별 문자로 분리

const str = 'Hello';
const chars = [...str];
console.log(chars); // ['H', 'e', 'l', 'l', 'o']

객체 복사 및 속성 추가

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 };
console.log(obj2); // { a: 1, b: 2, c: 3 }

함수 인자로 사용

function sum(a, b, c) {
  return a + b + c;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers)); // 6

정리

props는 컴포넌트 간 데이터를 전달하는 중요한 매커니즘이다! 스프레드 연산자는 배열 및 변수를 복사하거나 확장하는 데에도 사용할 수 있으며, props와도 많이 사용된다.