Props란?

부모 컴포넌트가 자식 컴포넌트에게 물려준 데이터.
컴포넌트 간의 정보 교류 방법이다.

• props는 반드시 위에서 아래 방향으로만 흐른다.
  • 부모 -> 자식 방향 (단방향)
• props는 반드시 읽기 전용으로 취급하며 변경하지 않는다.
  
  
  
  

Props로 값 전달하기

• 전달하기 주체 : 부모
• 받기 주체 : 자식

// src/App.js

import React from "react";

function App() {
  return <Child />; // 결과 : 박엄마
}

function Mother() {
	const name = '박엄마';
  return <Child motherName={name} />; // 💡"props로 name을 전달했다."
}

function Child(props) {
  console.log(props);
  return <div>연결 성공</div>;
}



export default App;

• props 정보는 객체 형태
• 결국 props는 부모 컴포넌트가 자식에게 넘겨준 데이터들의 묶음.
  
  
  
  

Props로 받은 값 화면에 렌더링하기

import React from "react";


function Child(props) {
  return <div>{props.motherName}</div>;
}

function Mother() {
  const name = "박엄마";
  return <Child motherName={name} />;
}

function App() {
  return <GrandFather />;
}

export default App;

props는 object literal({key: “value”}) 형태이기 때문에 {props.motherName}로 꺼내서 사용할 수 있다.
Mother에서 Child로 보내줄 때 motherName={name}으로 보내주었기 때문에 이 값을 꺼내 사용 가능한 것이다.

Prop drilling

부모 -> 자식 -> 그 자식 -> 그 자식의 자식 ... 이 데이터를 받기 위해서는 데이터를 n번 내려주어야 한다. props가 아래로 뚫고 내려간다고 하여 prop drilling이라 부른다.
이렇게 되면 코드를 읽을 때 해당 props를 추적하기 어려워지고 유지보수도 힘들다.

--> 이를 피하기 위해 redux와 같은 상태 관리 툴이 존재한다.

children

컴포넌트에서 말하는 children? 자식컴포넌트로 정보를 전달하는 또 다른 방법.
A 컴포넌트 사이에 B 컴포넌트가 있을 때 A 컴포넌트에서 B 컴포넌트 내용을 보여주려고 사용하는 props.

import React from "react";

function User(props) {
	console.log(props.children)
  return <div></div>;
}

function App() {
  return <User>안녕하세요</User>;
}
export default App;

Props 추출

구조 분해 할당을 통해 props 내부 값 추출하기

function Todo(props){
	return <div>{pros.title}</div> //이렇게 늘상 props 붙이는 것 대신
} 

function Todo({ title, body, isDone, id }){ //구조 분해 할당 이용!
	return <div>{title}</div>
}

defaultProps

부모 컴포넌트에서 props를 보내주지 않아도 설정될 초기 값
부모 컴포넌트로부터 props를 받기 전까지 임시로 사용할 수 있는 props를 자식 컴포넌트에서 직접 설정할 수 있다.
이후에 부모 컴포넌트에서 props가 오게되면 defaultProps는 사라지고 내려받은 props로 값이 바뀌게 된다.

import React from 'react';

function Child({ name }){
	return <div>내 이름은 {name} 입니다. </div>
}

Child.defaultProps={
	name: '기본 이름'
}

export default Child