Props

Props 란

부모 컴포넌트로 부터 받아온 데이터.

컴포넌트 간의 정보를 서로 교류 하려면

// src/App.js

import React from "react";

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

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

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

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


export default App;

props로 값 전달하기😁

Mother 컴포넌트가 가지고 있는 정보(값)을 Child에게 주고 싶을때

// src/App.js

import React from "react";

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

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

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

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



export default App;

 

Mother 컴포넌트가 전달해준 motherName 은 Child가 어떻게 받을 수 있을까

컴포넌트의 인자에서 props의 값을 받을 수 있다. 

콘솔에서 찍어보면

function Child(props){
	console.log(props) // 이게 바로 props다.
	return <div>연결 성공</div>
}

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

Mother로 부턴 전달받은 MotherName 을 화면에 렌더링 하기

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는 object literal 형태이기 때문에 props.motherName 으로 꺼내서 사용할 수 있다.

object literal의 key가 motherName인 이유는 우리가 Child로 보내줄 때 motherName = {name} 으로 보냈기 때문이다.

(object literal이란 {key: "value"} 데이터 형태를 의미한다.) 

JSX에서는 HTML만 쓸 수 있는 줄 알았는데, 자바스크립트 코드를 사용했음

JSX에서도 {중괄호}를 사용하면 자바스크립트 코드를 사용할 수 있다.

 

※ 자식 컴포넌트에서는 부모 컴포넌트로 props를 전달 할 수 없다. 오직 부모 컴포넌트에서 자식 컴포넌트로만 props를 전달 할 수 있다. 

props는 컴포넌트 다음으로 중요한 개념이다.

이제 props를 이용해서 컴포넌트와 컴포넌트 간 정보를 자유롭게 주고 받을 수 있어야 한다.

보내주고, 받고, 보내주고 받고 하는 과정으로 손으로 익히면서 머릿속으로 흐름을 떠올릴수 있도록 해야 한다.

 

더알면 좋은 키워드

* Props Driling 이란 무엇인가 ?