[React] Parent와 Props

Parent, Props

React는 컴포넌트 기반으로 구성하게 된다. 각 컴포넌트는 자체적으로 동작할 수 있는 기능적인 단위이다.

이때 부모 컴포넌트에서 자식 컴포넌트에 데이터를 전달하기 위해서는 props를 사용합니다.

 

아래와 같이 name이라는 prop을 가진 ChildComponent를 부모 컴포넌트에서 불러와 사용할 수 있다.

import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  return <ChildComponent name="React" />;
}

아래는 자식 컴포넌트에서 props를 받아와 사용하는 코드이다.

import React from 'react';

function ChildComponent(props) {
  return <div>Hello, {props.name}!</div>;
}

export default ChildComponent;

ChildComponent는 props를 받아와서 name을 출력한다.

(props는 ChildComponent에서 props.name과 같은 형태로 사용할 수 있다.)

이때 부모 컴포넌트에서 name을 전달하면 ChildComponent에서는 props.name으로 전달받을 수 있다.