개념

컴포넌트에 데이터를 전달하는 데이터를 prop이라고 한다. (Properties의 줄임말)

Props

단일 값 전달하기

컴포넌트 작성 시 해당 컴포넌트 태그에 변수이름={}으로 사용한다.

//App.js (최상위 컴포너트)
const today = function () {
  return new Date().toISOString();
};

function App() {
  return (
    <div className="App">
      <AppHeader />
      <header className="App-header">
        <h2>{myName}</h2>
        <Time init={today} />
      </header>
      <AppFooter />
    </div>
  );
}

전달받는 컴포넌트 (자식 컴포넌트)에서는 매개변수로 받아올 수 있는데 객체 타입으로 전달 받는다.

function Time(props) {
  return (
    <div>
      <h2>What Time?</h2>
      <p>{props.today}</p>
    </div>
  );
}

구조 분해 할당을 통해 더욱 쉽게 받을 수 있다.

객체나 배열 구문에서 속성을 바로 해체해서 변수처럼 사용할 수 있는 표현식이다.

//Time.js (자식 컴포넌트)
import React from 'react';

function Time({ today }) {
  return (
    <div>
      <h2>What Time?</h2>
      <p>{today}</p>
    </div>
  );
}

export default Time;

여러개 전달하기

스프레드 연산자(…)를 사용해서 여러 개의 값을 한번에 전달할 수 있다.

//App.js (최상위 컴포넌트)
const timeProps = {
  defaultDate: today,
  message: '지금 시간은?'
};

function App() {
  return (
    <div className="App">
      <AppHeader />
      <header className="App-header">
        <Time {...timeProps} />
      </header>
      <AppFooter />
    </div>
  );
}

//Time.js (자식 컴포넌트)
import React, { useState } from 'react';

function Time({ defaultDate, message }) {
  const getTime = () => {
    setTime(new Date().toISOString());
  };

  return (
    <div>
      <h2>What Time?</h2>
      <p>{time}</p>
      <button onClick={getTime}>{message}</button>
    </div>
  );
}

export default Time;

Props 초기화

혹여나 부모 컴포넌트에서 정상적으로 데이터를 넘기지 못 할 경우를 대비해 초기화를 해줄 수 도 있는데 defaultProps 속성을 사용하면 된다.

import React, { useState } from 'react';

function Time({ defaultDate, message }) {
  //..code
}

Time.defaultProps = {
  message: 'not send'
};

export default Time;

컴포넌트 전달하기

prop 데이터에 컴포넌트도 전달할 수 있다.

컴포넌트를 감싸고 있는 하위 컴포넌트들은 컴포넌트에서 Props.children으로 전달받을 수 있다.

//App.js
import Outer from './Outer';
function App() {
  return (
    <div className="App">
      <Outer>
        <Time />
      </Outer>
    </div>
  );
}

//OuterComponent.js
const Outer = function({children}) {
	return (
		<div style={{ padding : 20px, backgroundColor : '#ffeaa7'}}>
			{children}
		</div>
	);
}

export default Outer;

예를들어 단순히 스타일링을 위한 컴포넌트를 하나 생성하고, 상위 컴포넌트에서 자식 컴포넌트들을 감싸주면 children 으로 컴포넌트를 받아 값 처럼 사용할 수 있다.

Event 전달하기

자식 컴포넌트에 함수를 전달해 이벤트 핸들링을 할 수도 있다.

예시로, 자식 컴포넌트에서 버튼 click이벤트를 통해 부모 컴포넌트의 색상을 컨트롤하는 과정을 해보았다.

1. 부모 컴포넌트에서 자식 컴포넌트에서 받을 데이터를 핸들링 해주는 함수를 작성한다.

   import { useState } from 'react';
   import './App.css';
   import Time from './Time';
   
   function App() {
     //리렌더링을 위해 useState사용
     const [color, setColor] = useState('App');
   
     const today = function () {
       return new Date().toISOString();
     };
   
     //핸들러 함수
     const onChangeBackground = function (params) {
       setColor(params);
     };
   
     return (
       <div className={color}>
         <header className="App-header">
           <Time today={today()} onChangeBackground={onChangeBackground} />
         </header>
       </div>
     );
   }
   export default App;
   

2. 자식 컴포넌트에서 부모 컴포넌트로 바인딩 시켜 줄 event prop을 호출하고 매개변수로 데이터를 전달한다.

   function Time({ today, onChangeBackground }) {
     return (
       <div>
         <h2>What Time?</h2>
         <p>{today}</p>
         <div>
           <button
             type="button"
             value={'red'}
             onClick={(e) => {
               onChangeBackground(e.target.value);
             }}
           >
             RED
           </button>
           <button
             type="button"
             value={'green'}
             onClick={(e) => {
               onChangeBackground(e.target.value);
             }}
           >
             GREEN
           </button>
           <button
             type="button"
             value={'blue'}
             onClick={(e) => {
               onChangeBackground(e.target.value);
             }}
           >
             BLUE
           </button>
         </div>
       </div>
     );
   }
   

   

   해당 소스는 github에서 확인하실 수 있습니다.😄

참고자료

• 한입 크기로 잘라 먹는 리액트(React.js) - Props
• React 공식문서 - 컴포넌트에 함수 전달하기