Props

• 단어 뜻 그대로 Component의 속성값이다.
• Props는 부모 Component로부터 전달 받은 데이터를 지니고 있는 객체이다.
• Props를 이용해 어떤 JavaScript 값이든 모두 자식 Componenet에 전달할 수 있다.
  
  

Props 객체

• Function Component에서 Props, 즉 Componenet의 속성을 어떻게 정의하는지 알아보자.

// 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 />
    </div>
  );
}

export default Parent;

• Parent.js 부모 Component이다.
• 부모 Component 안에서 <Child /> Component를 import 후 <h1> 태그 아래에 위치하였다.
• 부모의 state에 있는 데이터를 <Child /> Component에게 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;

• 자식 Component의 props로 titleColor 속성을 생성하였다.
• titleColor의 값으로 color, 즉 부모 component의 state인 color 값을 전달하였다.
• 이러한 방식으로 props를 통해 부모 component 내부의 state 값을 자식 component에게 전달할 수 있다.
• <Child /> component 내부에서 전달 받은 props 데이터를 어떻게 사용하는 지 확인하자.

• component의 props는 객체이다.
• Child.js 내부에서 props 객체가 어떻게 생겼는지 확인하자.

// 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;

• <Child /> component 내부에 <h1> 태그가 있다.
• 해당 태그의 글자 색상을 부모 component의 state로부터 전달 받은 데이터를 지정한다.
• Function Component는 부모가 전달한 props를 인자로 받는다.
• return문 위에서 props값을 console.log로 확인한다.
• 결과 확인 시 props 객체 안에 부모로부터 전달 받은 데이터가 key-value 형태로 담겨 있는 것을 확인할 수 있다.

<h1 style={{color: props.titleColor}}>Child Component</h1>

// props: 해당 component의 props 객체
// props.titleColor : props 객체의 특정 key(titleColor)값. 즉 'red'

• component 내부에서 부모 component로부터 전달 받은 props 데이터를 사용하기 위해서는 props 객체의 특정 키 값, props.titleColor 이렇게 작성하면 된다.
• 다음으로는 props 객체를 통해 부모에서 정의한 event handler를 전달하는 방법을 알아보자.
  
  

Props & Event

Props 통한 Event Handler 전달

// 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} changeColor={ () => setColor('blue')} />
    </div>
  );
}

export default Parent;

• props 객체를 통해 state 데이터 뿐만 아니라 부모에서 정의한 event handler function도 넘겨줄 수 있다.
• props의 changeColor 값으로 Parent Function에서 정의한 setColor Function 자체를 넘겨주고 있다.
• <Child /> Component에서 어떻게 props로 전달받은 handleColor Function를 활용하는지 알아보자.

// Child.js

import React from 'react';

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

export default Child;

• <Child /> component 내부에 <button> 태그가 있다.
• 다음의 순서에 따라서 코드가 실행된다.

1. <button> 요소에서 onClick 이벤트 발생
2. 이벤트 발생 시 props.changeColor 실행
3. props 객체의 changeColor, 즉 부모 component로부터 전달 받은 setColor Function 실행
4. setColor Function 실행 시 state의 color값이 blue로 변경
5. <Child /> component에 변경된 state 데이터(color) 전달
6. props.titleColor를 글자 색상으로 지정하는 <h1> 타이틀 색상 변경