[React] Props

Props란?

• 부모 컨포넌트로부터 받아온 데이터.
• 부모 → 자식 간에만 props 전달 가능함.
• 이로 인해 props drilling 발생. 여러 수준의 중첩을 통해 동일한 데이터를 전달해야 하는 경우 코드가 더 복잡해지고 유지 보수가 어려워짐. 특정 컴포넌트에서 props를 사용하지 않으나 상위 컴포넌트에서 하위 컴포넌트에 이어주는 역할만 할 수도 있음.

children

import React from "react";

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

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

• Layout 컴포넌트를 만들 때 자주 사용함.

구조분해할당과 props

function Todo({ title, body, isDone, id }){
	return <div>{title}</div>
}

• 여러 개의 props를 받는다면 구조분해할당으로 해당 코드와 같이 props를 받을 수 있음.

defaultProps

// components/Child.js

import React from 'react';

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

// 이렇게 설정합니다.
Child.defaultProps={
	name: '기본 이름'
}

export default Child

• 부모 컴포넌트에서 props를 보내주지 않아도 설정될 초기값.