Props

🔴props

🔴Props 추출

---

props

컴포넌트간의 정보교환/교류 방식, 부모 컴포넌트가 자식 컴포넌트에게 물려준 데이터

1. props는 반드시 위에서 아래 방향으로 흐른다.
   • 즉, [부모] → [자식] 방향으로만 흐른다(단방향).
2. props는 반드시 읽기 전용으로 취급하며, 변경하지 않는다.

---

Mother컴포넌트에서 Son컴포넌트로 name = '흥부인' 이라는 정보를 전달

import React from 'react';

// 자식
function Son() {
  return <div>나는 아들입니다.</div>;
}

// 엄마
// Mother -> Son 으로 정보를 전달했다.
function Mother() {
  const name = "흥부인";
  return <Son motherName={name}/>; // Mother컴포넌트에서 Son컴포넌트로 다음과 같은 정보를 내려줬다_props
}

// 할아버지 대문자로 시작하는 낙타로 컴포넌트 명명
function GrandFather() {
  return <Mother />;
}

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

export default App;

---

Mother컴포넌트에서 전달한 정보는 Son컴포넌트에서 받고(props를 통해 부모 -> 자식으로 데이터가 전달 된것을 확인)

console.log로 출력해서 확인

import React from 'react';

// 자식
function Son(props) {
  console.log("props", props);
  return <div>나는 아들입니다.</div>;
}

// 엄마
// Mother -> Son 으로 정보를 전달했다.
function Mother() {
  const name = "흥부인";
  return <Son 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”} 데이터 형태를 의미

function Son(props) {
  console.log("props", props); // props를 출력하니까 {mother: "흥부인"}으로 출력이 되고
  return <div>나는 아들입니다.</div>;
}

▼ 으로 바꿔주면

function Son(props) {
  console.log("props", props.motherName); // props를 출력하니까 흥부인으로 출력이 되고
  return <div>나는 {props.motherName}아들입니다.</div>;
}

---

import React from 'react';

// 자식
function Son(props) {
  console.log("props", props.GrandFatherName); // props를 출력하니까 {mother: "흥부인"}으로 출력이 되고
  return <div>나는 {props.GrandFatherName}의 손자입니다.</div>;
}

// 엄마
// Mother -> Son 으로 정보를 전달했다.
function Mother(props) {
  return <Son GrandFatherName={props.GrandFatherName}/>; // props이고
}

// 할아버지 대문자로 시작하는 낙타로 컴포넌트 명명
function GrandFather() {
  const name = '흥할아버지'
  return <Mother GrandFatherName={name} />;
}

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

export default App;

---

import React from 'react';

// 자식
function Son(props) { // 4. 데이터를 받아서
  console.log("props", props.gfName); // 흥할아버지
  return <div>나는 {props.gfName}의 손자입니다.</div>;
}

// 엄마
function Mother(props) {  // 2. 할아버지의 데이터를 받고
  // console.log("props", props); // 2. {GrandFatherName: '흥할아버지'}
  const gfName = props.GrandFatherName // 받은 데이터를 변수로 지정해주고 

  return <Son gfName={gfName}/>; // 3. 변수로 지정한 할아버지의 데이터를 gfName로 Son컴포넌트로 내려주고(전달만 하는 중간다리 역할로 이런 중간다리 역할의 부분들을props drilling라고 함) 
}

// 할아버지 
function GrandFather() {
  const name = '흥할아버지'
  return <Mother GrandFatherName={name} />; // 1. name "흥할아버지"를 Mother컴포넌트로 내려주고 
}

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

export default App;

[부모] → [자식] 컴포넌트간 데이터 전달이 이루어지는 방법은 props라고 한다.

[부모] → [자식] → [그 자식] → [그 자식의 자식] 이 데이터를 받기 위해선 무려 3번이나 데이터를 내려줘야 하는데 이걸 바로 prop drilling, props가 아래로 뚫고 내려간다고 한다.

✔️prop drilling_컴포넌트가 너무 많으면 유지 보수 측면에서 여려움을 겪는다.

---

Props추출

구조분해 할당과 Props

구조분해 할당을 통해 props 내부값 추출하기

 

1. 구조분해할당 해보기

// src/App.js

import React from "react";

function App() {

  // 객체 존재
  const testObj = {
    name: "mini",
    age: 28,
    company: "sparta"
  }

  // 새로운 변수 할당
  const { name, age, company } = testObj; // 해당 key의 이름을 가진 value들을 뽑아옴
  
  // value들이 출력됨
  console.log(name); // mini
  console.log(age);  // 28
  console.log(company);  // sparta


  return <div>App</div>
}

export default App;

 

2. props랑 childres props동시에 주기

import React from "react";

// Child라는 컴포넌트에 children props로 이름을 주기
function App() {
  return <Child>이름</Child>  
}
export default App;

import React from "react";

// Child컴포넌트에 props
function App() {

  const name = "test";

  return <Child age={21} name={name} />;
}

export default App;

▼

import React from "react";

// 두개를 동시에 props
function App() {

  const name="test";

  return <Child age={21} name={name}>이름</Child>;
}

export default App;

---

Child.js파일을 만들고, App.js에 Child를 import

// src/App.js

import React from "react";
import Child from "Child";

function App() {

  const name="test";

  return <Child age={21} name={name}>이름</Child>;
}

export default App;

// src/Child.js

import React from 'react'


// App.js에서 props한 데이터 받기
function Child(props) {
    console.log(props)

    return <div>Child</div>

}

export default Child

props한 데이터를 Child에서 잘 보여주고 있다.

 

---

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

// src/Child.js

import React from 'react'

// App.js에서 props한 데이터 받기
function Child({age, name, Children}) {
    console.log(age);
    console.log(name);
    console.log(Children);
    return <div>Child</div>;
}
export default Child;

왜 children이 undefined인지 알 수 없네,,,,,,,,

---

defaultProps

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

 

자주 받거나 또는 무조건 받아야 하는 props들을 defaultProps로 설정하면, 부모 컴포넌트로부터 아직 props 값을 받지 못했더라도 임시로 props의 값을 채울 수 있다. 

// src/App.js
import React from "react";
import Child from "Child";

function App() {
  const name = "test";

  return <Child name={name}>이름</Child>;  // age의 값이 없음
}

export default App;

// src/Child.js
import React from 'react';

function Child({age, name, Children}) {
    console.log(age);
    console.log(name);
    console.log(Children);
    return <div>Child</div>;
}

Child.defaultProps={
    age: "기본 나이",
};
// defaultProps로 설정해둔걸로 출력된다.

export default Child;

---

default Argument

매개변수가 지정되지 않았으면 자동으로 지정해줄 값을 정하라는 의미이다.

function multiply(a, b = 1) {
  return a * b;
}

console.log(multiply(5, 2));
// Expected output: 10

console.log(multiply(5));
// Expected output: 5

 

 

#엘리스트랙 #엘리스트랙후기 #리액트네이티브강좌 #온라인코딩부트캠프 #온라인코딩학원 #프론트엔드학원 #개발자국비지원 #개발자부트캠프 #국비지원부트캠프 #프론트엔드국비지원 #React #Styledcomponent #React Router Dom #Redux #Typescript #Javascript