📲 Props

• props : properties(속성), 단어 뜻 그대로 컴포넌트의 속성값
• props는 부모 컴포넌트로부터 전달 받은 데이터를 지니고 있는 객체를 의미한다.
• props를 이용해 어떤 자바스크립트 값이든 모두 자식 컴포넌트에 전달할 수 있다.(변수, state 값, event handler 등)

⚡️ Props 객체

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

export default Parent;

• Parent.js 부모 컴포넌트.
• 부모 컴포넌트 안에서 <Child/> 컴포넌트를 import 후 <h1> 태그 아래에 위치해줌.

-> 부모의 state에 있는 데이터를 <Child /> 컴포넌트에게 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;

• 자식 컴포넌트의 props 로 titleColor 속성을 생성함.
• titleColor의 값으로 color, 즉 부모 컴포넌트의 state인 color 값을 전달해주었음.

-> 이러한 방식으로 props를 통해 부모 컴포넌트 내부의 state 값을 자식 컴포넌트에게 전달할 수 있다.

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

-> <h1>태그의 글자 색상을 부모 컴포넌트의 state로 부터 전달 받은 데이터를 지정하는 과정

• 함수 컴포넌트는 부모가 전달한 props를 인자로 받은 후,
• return 문 위에서 props 값을 console.log로 확인해줌.
• 결과 확인 시 props 객체 안에 부모로 부터 전달받은 데이터가 key-value 형태로 담겨 있는 것을 확인할 수 있음.
• 컴포넌트 내부에서 부모 컴포넌트로부터 전달받은 props 데이터를 사용하기 위해서는 props 객체의 특정 키값, 즉 props.titleColor 이런 식으로 작성해주면 된다.

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

// props : 해당 컴포넌트의 props 객체
// props.titleColor : props 객체의 특정 key(titleColor)값. 즉 "red"

⭐️ 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의 changeColor 값으로 Parent 함수에서 정의한 setColor 함수 자체를 넘겨주고 있다.
<Child /> 컴포넌트에서 어떻게 props로 전달받은 handleColor 함수를 활용하는지 알아보자.

// 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 /> 컴포넌트 내부에 <button> 태그가 존재.
• 다음의 순서에 따라서 코드가 실행된다.
  1. <button> 요소에서 onClick 이벤트 발생
  2. 이벤트 발생 시 props.changeColor 실행
  3. props 객체의 changeColor, 즉 부모 컴포넌트로부터 전달받은 setColor 함수 실행
  4. setColor 함수 실행 시 state의 color 값이 'blue' 로 변경
  5. <Child /> 컴포넌트에 변경된 state 데이터(color) 전달
  6. props.titleColor 를 글자 색상으로 지정하는 <h1> 타이틀 색상 변경