Props

1.Props란?

 

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

 

// src/App.js

import React from "react";

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

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

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

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

export default App;

2. props로 값 전달하기

 

컴포넌트 간의 정보를 교류할 때 Props를 사용한다. 

Mother 컴포넌트가 가지고 있는 값을 Child에게 넘겨 주고 있다.

motherName 이라는 이름으로 name 값을 Child 컴포넌트에게 전달해 준것이다.

이 과정을 Props로 정보를 전달했다 라고 표현한다.

 

Child 컴포넌트는 Mother 컴포넌트가 넘겨준 값을 받기 위해선 어떻게 해야할까.

바로 컴포넌트 인자에서 props를 받을 수 있다. 

Child 컴포넌트 안의 console.log(props)의 결과값이다.

 

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

 

Mother 컴포넌트로부터 받은 값을 화면에 렌더링 해보자.

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

위 코드에서 Child 안에 return값만 이런식으로 바꿔주게되면 화면에 실질적으로 렌더링 된다.

props는 오브젝트 리터럴 형태이기 때문에 {props.motherName}으로 꺼내서 사용할 수 있다.

오브젝트 리터럴의 key가 motherName인 이유는 우리가 Child로 보내줄 때 motherName = {name} 으로 보내주었기 때문.

object 리터럴이란? {key: "value"} 데이터 형태를 의미한다.

JSX에서는 HTML 뿐만 아니라 { } 중괄호를 사용하여 자바스크립트 코드를 사용할 수 있다.

 

++주의할 점

자식 컴포넌트에서는 부모 컴포넌트로 props를 전달할 수 없다!

부모 컴포넌트만 자식 컴포넌트에게 props를 전달할 수 있다는 사실을 기억하자.

 

 

++ props 과정 순서

 

결과는 화면에 김할아 렌더링

name 변수 선언 및 할당은 첫번째 부모에서만 해주면 된다.

값을 받아올 때는 함수 ()안에 props를 기입해 받아와야 한다.

넘겨줄때는 <>안에 누구에게 줄지 기입 해야하고,

받아와서는 props.GrandFathername 처럼 받아온 값에서 어떤걸 사용할지 정해준다.