Props, Props Children, Props 추출

Props

: 부모에서 자식으로 값을 내려준다. 컴포넌트 간의 정보 교류 방법

⭐props는 반드시 위에서 아래 방향으로 흐른다. 즉, [부모] → [자식] 방향으로만 흐른다(단방향).

⭐props는 반드시 읽기 전용으로 취급하며, 변경하지 않는다

 

props로 값 전달하기

전달하기 - [주체 : 부모]

우리는 컴포넌트 간의 정보를 교류할 때 Props를 사용

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

// 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;

받기 - [주체 : 자식]

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

Mother가 보내준 정보가 객체 형태로

props란 결국 부모 컴포넌트가 자식에게 넘겨준 데이터들의 묶음

리액트에서는 Props를 통해 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 넘겨줄 수 있다.

 

 

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

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

props는 object literal 형태이기 때문에 {props.motherName} 로 꺼내서 사용할 수 있습니다. object literal의 key가 motherName 인 이유는 우리가 Child로 보내줄 때 motherName={name}

🤔object literal 란 {key: “value”} 데이터 형태를 의미

 

prop drilling

[부모] → [자식] → [그 자식] → [그 자식의 자식] 이 데이터를 받기 위해선 무려 3번이나 데이터를 내려줘야 한다.

이걸 바로 prop drilling, props가 아래로 뚫고 내려간다. 라고 한다.

 

---

Props Children

컴포넌트에서 말하는 children

: 자식 컴포넌트로 정보를 전달하는 또 다른 방법!

우리는 이미 그 방법을 ‘props’라고 배웠다. 얘도 props!

 

props를 보내는 방식

<User>리액트 어려워</User> 이렇게 정보를 보내고 있다.

<User hello='리액트 어려워'> 이렇게 props를 보내던 방식과는 조금 다르다. 이것이 children props를 보내는 방식이다.

정보를 받는 방식은 기존과 동일합니다. 대신 그 이름이 children 으로 정해져 있습니다.

import React from "react";


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

function App() {
  return <User>리액트 어려워</User>;
}

export default App;

children 값 받아서 렌더링하기

User 컴포넌트에서 props.children을 받아 그대로 렌더링 해준 모습

import React from "react";

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

function App() {
  return <User>리액트 어려워</User>;
}
export default App;

 

---

Props 추출

구조분해 할당과 Props

지금까지 props를 사용하는 모든 곳에서 props. 를 붙여줬다.

자바스크립트의 구조 분해 할당을 이용하여 조금 더 짧게 쓰는 방법이 있다. 앞서 설명했듯이 props는 object literal 형태의 데이터이다. 그래서 구조 분해 할당을 이용할 수 있다. 

만약 여러개의 props를 받는다면, { } 안에 여러개의 props를 그대로 써주면 된다.

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

 

defaultProps

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

Child 컴포넌트 입장에서는 부모 컴포넌트에서 name을 props 정보를 받기 전까지는 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

default props 지정하기

defaultProps를 설정하면, 부모 컴포넌트로부터 아직 props 값을 받지 못했더라고 임시로 props의 값을 채울 수 있다.

그리고 부모 컴포넌트로부터 props가 오게되면 defaultProps 값은 진짜 props 값으로 변경된다.

// components/Child.js

import React from 'react';

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

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

export default Child

 

 

 

 

 

<div ~~~~> 태그 옆에다가 주는 방법

태그 중간에 주는 방법{props.children}

 

나중에 정리하기..