Props 개념과 사용예제

 

Props란?

: 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 해주는 방법 (객체)

 

React | React로 생각하기

기억하세요: React는 항상 컴포넌트 계층구조를 따라 아래로 내려가는 단방향 데이터 흐름(one-way data flow) (또는 단방향 바인딩(one-way binding))을 따릅니다.

• 자바스크립트를 살펴보면, 함수는 재활용 가능
  • 함수를 쓸 때, parameter를 받아서, 다른 결과를 내지만, 동일한 함수임
• 리액트도 동일한 기능을 가지고 있음
  • 리액트의 props를 사용해서 컴포넌트를 재사용 할 수 있음

 

goalItem이 동적인 출력값을 가져야할 때, 변수 goalItem이 App컴포넌트 안에 있기 때문에 CourseGoalItem 컴포넌트에서는 html의 코드의 결과 값에 직접 접근할 수 없음

->props개념을 사용해야함

 

데이터를 보내고 싶은 컴포넌트에 'attribute'을 더하여 데이터를 전달 할 수 있음. 그럼 해당 컴포넌트에서는 데이터에 접근 가능. 우리만의 사용자 지정 html 요소를 만드는 거나 마찬가지임

html의 요소도 속성을 가질 수 있는 것 처럼, 컴포넌트도 사용자 지정 속성을 가질 수 있음. 이것이 바로 props (properties)

*props와 state의 차이점
props (“properties”의 줄임말) 와 state 는 일반 JavaScript 객체입니다. 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있는데, 한 가지 중요한 방식에서 차이가 있습니다. props는 (함수 매개변수처럼) 컴포넌트에 전달되는 반면 state는 (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리됩니다.

 

 

React | state와 props의 차이점은 무엇인가요?

props사용법

예제1

1. 속성을 지정하기

App.js

import MyComponent from './MyComponent';

const App = () => {
 return <MyComponent name="React" >;
}

export default App;

2. 데이터를 받는 컴포넌트에서 그 속성을 받기. parameter를 사용해라! 

MyComponent.js

const MyComponent = props => {
 return <div> 안녕하세요 제 이름은 {props.name}입니다. </div>;
};

export default MyComponent;

리액트는 1개의 parameter를 받는데, 그 parameter는 모든 속성을 받는 '객체'임. 이 것이 props. 물론 props의 이름은 임의로 지정가능함

props객체에서 key와 value로 이루어진 파일 포맷을 가지고 있음. key: 정의된 속성 이름, value: 설정된 값

 

예제2

sowjanya-105 | Basic-React-Contact-Web-Page

App.js

import React from "react";
import Card from "./Card";

const contacts = [
  {
    name: "Beyonce",
    imgURL:
      "https://blackhistorywall.files.wordpress.com/2010/02/picture-device-independent-bitmap-119.jpg",
    phone: "+123 456 789",
    email: "b@beyonce.com"
  },
  {
    name: "Jack Bauer",
    imgURL:
      "https://pbs.twimg.com/profile_images/625247595825246208/X3XLea04_400x400.jpg",
    phone: "+987 654 321",
    email: "jack@nowhere.com"
  }
];


function App() {
  return (
    <div>
      <h1 className="heading">My Contacts</h1>
      <Card
        name={contacts[0].name}
        img={contacts[0].imgURL}
        tel={contacts[0].phone}
        email={contacts[0].email}
      />
      <Card
        name={contacts[1].name}
        img={contacts[1].imgURL}
        tel={contacts[1].phone}
        email={contacts[1].email}
      />
    </div>
  );
}

export default App;

Card.js

import React from "react";

function Card(props) {
  return (
    <div className="card">
      <div className="top">
        <h2 className="name">{props.name}</h2>
        <img className="circle-img" src={props.img} alt="avatar_img" />
      </div>
      <div className="bottom">
        <p className="info">{props.tel}</p>
        <p className="info">{props.email}</p>
      </div>
    </div>
  );
}
export default Card;

 

간단한 법: 구조분해 할당

매개변수 안에 중괄호{}를 열고 key만 적어주면 됨

react-props-destructuring

 

 

App.js

import React, { useState } from "react";

import { Blinky } from "./Blinky";
import { Pinky } from "./Pinky";

import "./styles.css";

export default function App() {
  const [shakeBlinky, setShakeBlinky] = useState(false);

  /* Callback function */
  function ShakeBlink(newShakeValue) {
    setShakeBlinky(newShakeValue);
    /* reset shake=true back to shake=false after 1 second  */
    setTimeout(() => setShakeBlinky(false), 1000);
  }

  const [shakePinky, setShakePinky] = useState(false);

  /* Callback function */
  function ShakePink(newShakeValue) {
    setShakePinky(newShakeValue);
    /* reset shake=true back to shake=false after 1 second  */
    setTimeout(() => setShakePinky(false), 1000);
  }

  return (
    <>
      <div className="App">
        <h1>Destructuring React Props</h1>
        <h3>
          Look at Pinky and Blinky function parameters for variation in
          destructured syntax
        </h3>
        <h4>
          Both receive a simple string prop and a callback function passed down
          as prop at the same time
        </h4>
        <div className={shakePinky ? "pinkywrapper shaker" : "inkywrapper"}>
          {/* pass down 'title' as prop and 'ShakeBlink' callback function as prop */}
          <Pinky title="Hi, I'm Pinky" ShakeBlink={ShakeBlink} />
        </div>
        {/* pass down 'title' as prop and 'ShakePink' callback function as prop */}
        <div
          className={shakeBlinky ? "blinkywrapper shaker" : "blinkywrapper "}
        >
          <Blinky title="Hi, I'm Blinky" ShakePink={ShakePink} />
        </div>

        <h1>Timeout resets state after 1 second</h1>
        <h3>Click the buttons to see state change and then reset</h3>
        <h4>Currently Pinky is set to {JSON.stringify(shakePinky)}</h4>
        <h4>Currently Blinky is set to {JSON.stringify(shakeBlinky)}</h4>
      </div>
    </>
  );
}

 

Blinky.js

import React from "react";

/* accept props for both title and callback function as parameter in function */
export const Blinky = ({ ShakePink, title }) => {
  /* Could also be  */
  /* const ShakePink = props.ShakeIt; */
  /* or */
  /* const {ShakePink} = props; */

  return (
    <>
      <div className="blinky">
        {/* accept props */}
        {title}
        {/* send back 'true' as argument for callback function */}
        <button className="shakeTrigger" onClick={() => ShakePink(true)}>
          Shake Pinky
        </button>
      </div>
    </>
  );
};

 

Pinky.js

import React from "react";

/* accept props being passed down as parameter - (props) */
export const Pinky = props => {
  /* destructured assignement to accept callback function */
  const { ShakeBlink } = props;

  /* this is short for  */
  /* const ShakePink = props.ShakeIt; */

  return (
    <>
      <div className="pinky">
        {/* accept props */}
        {props.title}
        {/* send back 'true' as argument for callback function */}
        <button className="shakeTrigger" onClick={() => ShakeBlink(true)}>
          Shake Blinky
        </button>
      </div>
    </>
  );
};

 

 

결론

컴포넌트 사이에 데이터를 주고 받는 방법이 props. props를 통해 컴포넌트가 '재사용'가능해진다!

 

 

출처

노마드 코더 | Props

Udemy | React 완벽 가이드 with Redux, Next.js, TypeScript