[React] props 완전 정복기 (props 개념 쉽게 이해하기)

 

   목차 

1. props란?

2. [ props를 사용한 예시 1 ] props의 기본 원리 알아보기

3. [ props를 사용한 예시 2 ] Counter 컴포넌트에서 초기값을 props로 전달하기

4. [ props를 사용한 예시 3 ] state를 props로 전달하기

5. [ props를 사용한 예시 4 ] data를 props로 전달하기

6. [ props를 사용한 예시 5 ] 버튼 컴포넌트에 onClick이벤트와 type를 props로 전달하기

 

 

 

props를 예시 4개를 통해서 완벽하게 이해해보자!

 

 

---

 

 

 

 props란? 

 

"props"는 "properties"의 줄임말이다. 즉 프로퍼티의 모음집 (=객체)인 것이다.

 

아래를 보다시피, 객체는 프로퍼티의 집합이다.

 

결국 props는 객체인 것이다.

 

props는 부모 컴포넌트에서 자식 컴포넌트에게 어떤 값을 이름을 붙여서 전달한다.

자식 컴포넌트는 부모에서 내려준 props를 매개변수를 통해서 받아서 사용하게된다.

 

 

---

 

 

 [ props를 사용한 예시 1 ]  props의 기본 원리 알아보기

 

 Home.jsx 

import Component from "./../../components/Component";

const Home = () => {
  return (
    <div>
      <Component title="제목" />
    </div>
  );
};

export default Home;

 

 

 Component.jsx 

const Component = (props) => {
 
  console.log(props);
 
  return (
    <div>
      <div>{props.title}</div>
    </div>
  );
};

export default Component;

 

  console.log(props); 의 결과

 

 

 

 

 

부모컴포넌트(Home.jsx) 에서 <Component title="제목" /> 라고 쓰면, 
Component.jsx 컴포넌트에 {title: "제목"} 이라는 객체를 props라는 주머니에 넣어서 전달한다고 생각하면 쉽다.

부모 컴포넌트에서 보낸 것을 자식 컴포넌트에서 받으려면,  props라는 주머니를 매개변수로 쓰면된다. 

props는 객체이기 때문에, "제목"이라는 값(value)을 뜨게 얻으려면,

(객체에서 프로퍼티의 값을 얻는 방법 중 하나인) 점표기법을 쓰면 된다.

props.title 과 같이 말이다.

따라서 화면 상에서는 아래와 같이 뜨게 된다.

 

 

 

---

 

 

 [ props를 사용한 예시 2 ]  Counter 컴포넌트에서 초기값을 props로 전달하기 

 

 App.js 

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

function App() {
 return (
   <div>
   <Counter initialValue={5} /> // 자식 컴포넌트로 보내기
   </div>
 );
}
 
 export default App;

 

 

 Counter.js 

import React,{useState} from 'react';

const Counter = (props) => {  // 매개변수에 props를 써서 받기
console.log(props);  // {initialValue: 5}

const [count,setCount] = useState(props.initialValue) // 점표기법으로 꺼내서 사용하기


const onIncrease = () =>{     
  setCount(count + 1);        
}

const onDecrease = () =>{      
  setCount(count -1);          
}

return (
  <div>
   <h2>{count}</h2> 
   <button onClick={onIncrease}>+</button> 
   <button onClick={onDecrease}>-</button>
   </div>
  );
 };
 
 export default Counter;

 

 

여러개의 props를 전달하면 코드 길이가 길어져서 불편하기 때문에, 객체로 만들어서 전달하기

 

 App.js 

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

function App() {
 const counterProps = {
 a: 1,
 b: 2,
 c: 3, 
 d: 4, 
 e: 5,
 initialValue: 5,
 );
 
 return (
   <div>
   <Counter {...counterProps} /> // 스프레드 연산자 사용해서 자식 컴포넌트로 보내기
   </div>
 );
}
 
 export default App;

 

 

---

 

 

 [ props를 사용한 예시 3 ]  state를 props로 전달하기 

 

 App.jsx 

import { useState } from "react";
import { Modal } from "./Modal";
import "./styles.css";

export default function App() {
  const [openModal, setOpenModal] = useState(false);

  return (
    <div>
      <button
        type="button"
        className="add-cart-button"
        onClick={() => {
          setOpenModal(true);
        }}
      >
        장바구니 담기
      </button>
      // App.js에서의 state를 Modal 컴포넌트에 props로 전달한다.
      {openModal ? <Modal openModal={openModal} setOpenModal={setOpenModal} /> : null} 
    </div>
  );
}

 

 

 Modal.jsx 

import "./Modal.css";


export const Modal = ({ openModal, setOpenModal }) => { // props를 전달받는다.
  return (
    <div className="Overlay">
      <div className="cart-container">
        <span className="product-name">[풀무원] 국물 떡볶이</span>
        <span className="product-price">4,000원</span>
        <div className="count">
          <div className="minus">-</div>
          <div className="number">2</div>
          <div className="plus">+</div>
        </div>
        <span className="total">합계</span>
        <span className="total-price">8,000원</span>
        <button
          className="cancle"
          type="button"
          onClick={() => {
            setOpenModal(false); // 클릭 이벤트로 모달창 닫히게 하기
          }}
        >
          취소
        </button>
        {!openModal ? setOpenModal(true) : null} // state 반전시키기
        <button className="add-cart" type="button">
          장바구니 담기
        </button>
      </div>
    </div>
  );
};

 

 

---

 

 

 [ props를 사용한 예시 4 ]  data를 props로 전달하기 

 

 List.jsx 

import "./List.css";
import ListItem from "../../components/ListItem/ListItem";

const List = () => {

  const dummyList = [
    {
      id: 1,
      title: "1번 게시글",
    },
    {
      id: 2,
      title: "2번 게시글",
    },
    {
      id: 3,
      title: "3번 게시글",
    },
    {
      id: 4,
      title: "4번 게시글",
    },
    {
      id: 5,
      title: "5번 게시글",
    },
  ];

  return (
    <div>
      <div className="list-container">

        {dummyList.map((it) => {
          return <ListItem key={it.id} {...it} />;
        })}
      </div>
    </div>
  );
};

export default List

 

* {...it} 스프레드 연산자를 통해 객체들을 전부 다 ListItem 컴포넌트에게 props로 전달한다. 

 

 

 ListItem.jsx 

import "./ListItem.css";

const ListItem = (props) => {

console.log(props); // 콘솔에 찍어보기

  return (
    <div>
      {/* <div className="list-box">{props.title}</div>  */}
      <div className="list-box"></div> 
    </div>
  );
};

export default ListItem;

 

* console.log(props) 로 콘솔에 찍으면 다음과 같이 데이터를 잘 불러온다.

 

 

---

 

 

 [ props를 사용한 예시 5 ]  버튼 컴포넌트에 onClick이벤트와 type를 props로 전달하기 

 

 App.js 

import MyButton from "./components/MyButton";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
     <MyButton text={"버튼"} onClick={()=>alert("버튼 클릭")} type={"positive"}/>
    </div>
  );
}

 

 

 MyButton.js 

const MyButton = ({ text, type, onClick }) => {
  return(
    <button className={["MyButton", `MyButton_${type}`]} onClick={onClick}>
       {text}
    </button>
     )
   };

   MyButton.defaultProps = {
     type: "positive"
   }
   
   export default MyButton;

 

* MyButton에서 type prop을 전달하지 않으면 positive로 전달하게끔 하기