위코드 파운데이션 과정을 들으며 정리한 내용입니다.

Props 정의

props 는 컴포넌트 속성값으로 부모 컴포넌트로부터 전달받은 데이터를 지닌 객체입니다. props 로 전달하려는 값(변수, 함수, state값, event handler 등)들은 모두 자식 컴포넌트에게 전달할 수 있습니다.

Props 사용

부모 컴포넌트에서 데이터 전달

부모 컴포넌트의 데이터를 자식 컴포넌트에게 전달하고 싶다면 아래와 같이 쓸 수 있습니다. 자식 컴포넌트을 import 하고 부모 컴포넌트에서 선언한 변수를 자식 컴포넌트 (Childe 태그)의 속성값으로 넣어서 전달합니다. 여러 값을 전달한다면 값을 띄어서 계속 추가할 수 있습니다.

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

const Parent = () => {
	const animal = "호랑이";
	
	return (
		<>
			<h1>부모 컴포넌트입니다.</h1>
			<p>{ animal }</p>
			<Child pet = { animal } englishName = "tiger" />
		</>
	);
}

위 코드에서 pet 이나 englishName 같은 데이터의 인식표는 자식 컴포넌트로 전달된 객체 형태 데이터의 key 역할을 합니다.

자식 컴포넌트에서 전달 받은 데이터 사용

자식의 함수 컴포넌트는 함수가 인자를 받듯 매개변수를 설정해 데이터를 받습니다. 매개변수의 이름은 아무거나 지을 수 있지만 props 라는 것을 명시적으로 알 수 있게 props 를 사용하는 것인 컨벤션 입니다. 아래 코드처럼 자식 컴포넌트가 전달받은 props 를 객체의 value 를 뽑아 쓰듯 사용하면 됩니다.

import React from 'react';

const Child = (props) => {
	console.log(props); //=> {pet: '호랑이', englishName: "tiger"}

	return (
		<>
			<h2>자식 컴포넌트</h2>
			<p>{ props.pet }</p> //=> 호랑이
			<p>{ props.englishName }</p> //=> tiger
		</>
	);
} 

export default Child;

함수 전달과 적용

아래 예시처럼 부모 컴포넌트 버튼에 적용한 함수를 자식 컴포넌트에서 사용하고 싶다면 위의 값들과 같은 방식으로 함수명을 전달하면 됩니다.

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

const Parent = () => {
	const testConsole = () => {
		console.log("테스트");
	};
	
	return (
		<>
			<h1>부모 컴포넌트</h1>
			<button onClick={ testConsole }>클릭</button>
			<Child test={ testConsole } />
		</>
	);
};

export default Parent;

이제 함수를 전달받은 자심 컴포넌트는 객체 데이터를 활용하는 방식으로 해당 함수를 사용합니다. 클릭 이벤트 핸들러를 걸어주고 클릭시 함수가 실행하게 됩니다.

import React from 'react';

const Child = (props) => {
	console.log(props); //=> {test: () => {console.log("테스트")}} - 함수 자체를 받아옴

	return (
		<>
			<h2>자식 컴포넌트</h2>
			<button onClick={props.test}>클릭</button> 
		</>
	);
} 

export default Child;