자바스크립트 (React) - props

Props란?

부모 컴포넌트로부터 전달받은 데이터를 지니고 있는 객체입니다.

Parent.jsx

import React, { useState } from 'react';
import Child from './Child';
import GrandChild from './GrandChild';
import './Parent.scss';

const Parent = () => {
  const [name, setName] = useState('피자');
  
  const changeName = () => {
    setName('먹고싶다');
  };
  
  return (
    <div>
    	<div className="parent">
    		<p>parent<p>
    		<button onClick={changeName}>{name}</button>
		</div>
		<Child pet={name} test="111" name={{ a: 1 }} arr={{0,2}} />
		<GrandChild />
        </div>
  );
};

export default Parent;

Child 컴포넌트를 만들고 import 하고 return 문 내에 넣어줍니다. 부모,자식 컴포넌트에서 필요로 하는 데이터는 name이라는 변수입니다. pet={name}과 같이 자식 컴포넌트에 속성을 추가해 줍니다. 여기서 pet은 '자식 컴포넌트에서 데이터를 받을 때 사용되는 인식표'라고 생각하면 됩니다. 부모 컴포넌트에서 선언된 name이라는 변수를 자식 컴포넌트에 넘겨줄 때 pet이라는 그릇에 담아 보내주는 겁니다.

Child.jsx

import React, { useState } from 'react';
import './Child.scss';

const Child = props => {
  return (
    <div className="child">
    	<b>Child</b>
    	<p>첫번째</p>
    	<p>두번째</p>
    	<p>세번째</p>
    	<p>{props.pet}</p>
        {button onClick={props.changeName}>{props.pet}</button>
         </div>
  );
};

const Child = (매개변수) => {} 와 같이 부모 컴포넌트에서 보내준 데이터를 받아서 사용할 수 있습니다.
여기서 부모 컴포넌트가 전달해 준 props는 하나의 객체로 합쳐져서 함수 컴포넌트에 전달됩니다.
부모 컴포넌트인 Parent는 pet이라는 그릇에 변수 name을 담아서 보내줬습니다.

console.log(props.name.a);
props로 불러온 name 객체에 a객체에 1이 있으니 1이 출력됩니다.