Props와 Children

Props와 Children

Props

자바스크립트에서 함수를 작성할 때 매개변수를 받아 함수를 재사용할 수 있도록 만든다. 그래서 다른 매개변수 값으로 같은 함수를 호출할 수 있고 다른 결과 값을 반환한다.

마찬가지로 컴포넌트에서도 매개변수로 다른 값을 받아서 다른 결과를 반환 할 수 있다.

props는 properties를 나타내는 것으로 사용자 지정 컴포넌트의 속성을 설정할 수 있다. 재사용 가능한 컴포넌트를 만들 수 있게 해주고 컴포넌트에서 다른 컴포넌트로 데이터를 전달할 수 있기 때문에 아주 중요한 개념이다.

또한 부모 컴포넌트 데이터를 props로 받아 자식 컴포넌트에 전달이 가능하다.

import Profile from "./Profile";

const members = [
  { name: "hong", age: "20" },
  { name: "kim", age: "30" },
];

function App() {
  return (
    <div className="App">
      <Profile member={members[0]} />
      <Profile member={members[1]} />
    </div>
  );
}

export default App;

function Profile(props) {
  return (
    <div className="profile">
      <div className="name">{props.member.name}</div>
      <div className="age">{props.member.age}</div>
    </div>
  );
}

export default Profile;

Children

props를 통해 모든 것을 설정하는 컴포넌트가 아니라 가끔은 컴포넌트의 열고 닫는 태그 사이에 있는 컨텐츠를 전달하고 싶을 수도 있다.

그럴 때 props.children를 사용할 수 있다. children은 예약어이기 때문에 우리는 props.children을 설정하지 않았지만 사용할 수 있다.

props.children의 값은 언제나 사용자 지정 컴포넌트에 있는 열고 닫는 태그 사이에 있는 컨텐츠이다.

function Card(props) {
    const classes = 'card ' + props.className;
    return (
      <div className={classes}>{props.children}</div>
    );
  }
  
  export default Card;

import Profile from "./Profile";
import Card from "./Card";
import "./style.css";

const members = [
  { name: "hong", age: "20" },
  { name: "kim", age: "30" },
];

function App() {
  return (
    <div className="App">
      <Card className="profile-style">
        <Profile member={members[0]} />
      </Card>

      <Card className="profile-style">
        <Profile member={members[1]} />
      </Card>
    </div>
  );
}

export default App;