Props[내배캠]

Props - [Object-Riteral로 전달하기]

예제1)

import React from "react";

// div안에서 { } 를 쓰고 props.motherName을 넣어보세요.
function Child(props) {
  return <div>{props.motherName}</div>;
}

function Mother() {
  const name = "홍부인";
  return <Child motherName={name} />;
}

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

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

export default App;

[질문] : 혹시 자식 컴포넌트에서는 부모 컴포넌트로 props를 전달 할 수 없나요?
[답변] : 네, 자식 컴포넌트에서는 부모 컴포넌트로 props를 전달할 수 없습니다. 오직 부모 컴포넌트에서 자식 컴포넌트로만 props를 전달할 수 있습니다.

 

예제2

// src/App.js

import React from "react";

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

function Mother(props) {
  return <Child grandFatherName={props.grandFatherName} />;
}

function GrandFather() {
  const name = "이범규";
  return <Mother grandFatherName={name} />;
}

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

export default App;

---

Props - [Children으로 전달하기]

주로 태그와 태그 사이에 위치하는 "안녕하세요"와 같은 문구를 자식컴포넌트에 전달할 때 사용한다.

import React from "react";

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

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

---

Props - [구조분해 할당으로 전달하기]

function Todo(props){
	return <div>{props.todo}</div>
}

문제는 없지만 todo 라는 props를 사용하는 모든 곳에서 props. 를 붙여줘야만 했죠. 이것을 조금 더 짧게 쓰는 방법이 있습니다. 바로 자바스크립트의 구조 분해 할당을 이용하는 것 입니다. 앞서 설명했듯이 props는 object literal 형태의 데이터 입니다. 그래서 우리는 구조 분해 할당을 이용할 수 있습니다. 이렇게 말이죠.

function Todo({ title }){
	return <div>{title}</div>
}

훨씬 간단하고 짧아졌습니다. 만약 여러개의 props를 받는다면, { } 안에 여러개의 props를 그대로 써주면 됩니다. 앞으로는 모든 예시에서 구조 분해 할당을 이용해서 props를 사용하겠습니다.

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

 

defaultProps

defaultProps란 무엇인가?

컴포넌트를 만들고 자식 컴포넌트에서 props를 받다보면, 자주 받거나 또는 무조건 받아야 하는 props들이 있습니다. 예를 들어 나이를 props로 받아 화면에 렌더링 하는 컴포넌트가 있다고 예를 들어보죠.

💡 defaultProps란, 부모 컴포넌트에서 props를 보내주지 않아도 설정될 초기 값 입니다.

// components/Child.js

import React from 'react';

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

export default Child

Child 컴포넌트 입장에서는 부모 컴포넌트에서 name을 props 정보를 받기 전까지는 name 이 없는 상태죠. 그래서 자식 컴포넌트 입장에서는 name이 무엇인지 알 수 없습니다. 결과적으로 자식컴포넌트는 화면에 아무것도 표시해주지 못하게 됩니다. (이렇게요 내 이름은 "" 입니다. )

굉장히 어색하겠죠? 그래서 부모 컴포넌트에서 props를 받기전까지 임시로 사용 할 수 있는 props를 설정 할 수 있습니다. Child 컴포넌트에서 직접이요! 이후에 부모 컴포넌트에서 name props가 오게되면 설정된 defaultProps는 사라지고 내려 받은 props로 값이 바뀌게 됩니다.

// components/Child.js

import React from 'react';

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

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

export default Child

이렇게 defaultProps를 설정하면, 부모 컴포넌트로부터 아직 props 값을 받지 못했더라고 임시로 props의 값을 채울 수 있습니다. 그리고 부모 컴포넌트로부터 props가 오게되면 defaultProps 값은 진짜 props 값으로 변경됩니다. 아래 코드처럼도 할 수 있는데, 방법만 다를 뿐 모두 defaultProps를 설정하는 방법 입니다. 마치 함수의 default argument를 설정하는 것과 같죠?

import React from 'react';

// 구조 분해 할당 문법을 사용하면 이렇게도 할 수 있어요.
function Child({ name = '기본이름' }){
	return <div>내 이름은 {name} 입니다. </div>
}

export default Child