Props (Properties)

JSX 문법에서는, 컴포넌트를 호출할 때 해당 컴포넌트에서 사용할 속성값을 넣어서 보내줄 수 있는데, 그렇게 컴포넌트에 넣어준 속성들을 Props라고 부른다.

컴포넌트에 넣어준 속성들은 하나의 객체로 묶여서 컴포넌트를 정의한 함수의 파라미터 값으로 전달된다.

Parent.js

import React, { useState } from 'react';
import Child from '../pages/Child/Child';

function Parent() {
  const [color, setColor] = useState('red');

  return (
    <div>
      <h1>Parent Component</h1>
      <Child titleColor={color} />
    </div>
  );

export default Parent;

---

Child.js

import React from 'react';

function Child(props) {
  // console.log(props);

  return (
    <div>
      <h1 style={{color : props.titleColor}}>Child Component</h1>
    </div>
  );
}

export default Child;

위 예시 코드처럼, Parent 함수에서 Child 컴포넌트를 호출함과 동시에 titleColor라는 속성을 red로 지정해주고, Child 함수 내부에서 props라는 파라미터를 하나 만들어 출력해보면 브라우저 콘솔에는 다음과 같은 객체 형태의 값을 볼 수 있다.

{ titleColor: "red" }

즉, props를 활용하면 사용할 속성 값들을 다양하게 전달해주면서 컴포넌트를 활용할 수 있는데, 똑같은 컴포넌트라도 전달된 속성값에 따라 서로 다른 모습을 그려낼 수도 있게 된다는 뜻이다!

참고로, props는 객체 형태를 띠고 있어 Child.js에서 호출할 땐 props.[키 이름] 등으로 호출하여야 한다. 상단의 Child.js에서는 props.titleColor가 그 예시가 되겠다.

이 때에는 Destructuring 문법을 활용해서 조금 더 간결하게 코드를 작성할 수도 있는데, Destructing 문법에 대해서는 한번 찾아보는 것도 추천한다.

Children

props에는 children이라는 조금 특별한 props가 있다.

JSX 문법으로 컴포넌트를 작성할 때 컴포넌트를 단일 태그가 아니라 여는 태그와 닫는 태그의 형태로 작성하면, 그 안에 작성된 코드가 바로 이 children 값에 담기게 됩니다.

Button.js

function Button({ children }) {
  return <button>{children}</button>;
}

export default Button;

---

App.js

import Button from './Button';
import Dice from './Dice';

function App() {
  return (
    <div>
      <div>
        <Button>던지기</Button>
        <Button>처음부터</Button>
      </div>
      <Dice color="red" num={2} />
    </div>
  );
}

export default App;

그래서 JSX 문법으로 컴포넌트를 작성할 때
어떤 정보를 전달할 때는 일반적인 props의 속성값을 주로 활용하고,
화면에 보여질 모습을 조금 더 직관적인 코드로 작성하고자 할 때 children 값을 활용할 수가 있다.

참고로 이 children은 단순히 텍스트만 작성하는 걸 넘어서 컴포넌트 안에 컴포넌트를 작성할 수도 있고, 컴포넌트 안에 복잡한 태그들을 더 작성할 수도 있다고 하니 이 값을 어떻게 활용하면 좋을지 우리 다같이 한번 생각해 보는 것도 좋을 것 같다!